As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

This week's CSS/HTML question

KrunkMcGrunkKrunkMcGrunk Registered User regular
edited September 2010 in Help / Advice Forum
I'm back!

Anyhow, I'm trying to figure out how to apply the border property to a class that is used in a column. Here's the table:
<table>
	<colgroup>
		<col />
		<col class="alternate" />
		<col />
	</colgroup>
	<tr>
		<td>This</td>
		<td>That</td>
		<td>The other</td>
	</tr>
	<tr>
		<td>Ladybird</td>
		<td>Locust</td>
		<td>Lunch</td>
	</tr>
	<tr>
		<td>Thing 1</td>
		<td>Thing 2</td>
		<td>Thing 3</td>
	</tr>
</table>

And here's the CSS class:
.alternate {
	background: #C8FFFF;
	border: 1px solid black;
}

I'm getting the background color from .alternate to show up in the middle column, but I'm not getting a border. Is border a valid property for column? What am I doing wrong?

mrsatansig.png
KrunkMcGrunk on

Posts

  • SeñorAmorSeñorAmor !!! Registered User regular
    edited September 2010
    Add
    style="border-collapse: collapse"
    

    to your table and it should work.

    SeñorAmor on
  • KrunkMcGrunkKrunkMcGrunk Registered User regular
    edited September 2010
    Where do I put that? In the table tag, or in the CSS stylesheet?

    KrunkMcGrunk on
    mrsatansig.png
  • SeñorAmorSeñorAmor !!! Registered User regular
    edited September 2010
    Where do I put that? In the table tag, or in the CSS stylesheet?

    Either in the table tag:
    <table style="border-collapse: collapse;">
    
    or in your css:
    table { border-collapse: collapse; }
    
    However that will apply to all tables.

    SeñorAmor on
  • KrunkMcGrunkKrunkMcGrunk Registered User regular
    edited September 2010
    Why didn't
    border: 1px solid black;
    
    work?

    KrunkMcGrunk on
    mrsatansig.png
  • SeñorAmorSeñorAmor !!! Registered User regular
    edited September 2010
    Short answer: because tables suck and you should really be using <div>s

    Longer, less-biased answer: As I understand it (and please, someone correct me if I'm wrong), tables (and cells) have their own "border" that overrides user-defined borders and must therefore be "removed" and have new border definitions applied.

    SeñorAmor on
  • KrunkMcGrunkKrunkMcGrunk Registered User regular
    edited September 2010
    Yeah, I don't really plan on using tables very often. But, for the sake of completeness, I'm learning tables anyhow by way of HTMLdog - which is a great site, but doesn't go very in-depth from what I can tell.

    KrunkMcGrunk on
    mrsatansig.png
  • SeguerSeguer of the Void Sydney, AustraliaRegistered User regular
    edited September 2010
    SeñorAmor wrote: »
    Short answer: because tables suck and you should really be using <div>s

    Longer, less-biased answer: As I understand it (and please, someone correct me if I'm wrong), tables (and cells) have their own "border" that overrides user-defined borders and must therefore be "removed" and have new border definitions applied.

    Tables are fine (and better!) for tabular data.

    Your original border declaration should have given you a border, but border-collapse will make it look nicer (generally).

    Quick Google results which should be able to give you some more info:

    http://www.search-this.com/2007/04/11/styling-table-columns-with-css/
    http://www.w3schools.com/tags/tag_colgroup.asp

    Seguer on
  • KrunkMcGrunkKrunkMcGrunk Registered User regular
    edited September 2010
    I'm reading over that first link you posted (http://www.search-this.com/2007/04/11/styling-table-columns-with-css/)

    And in this example:
    #
    <style type="text/css">
    table{border-collapse:collapse}
    .col1,.col5,.col9{background:red}
    .col2,.col6,.col10{background:blue}
    .col3,.col7{background:green}
    .col4,.col8{background:orange}
    td,th{border:1px solid #000;padding:5px}
     
    </style>
    

    Couldn't that be greatly simplified by applying a CSS as such:
    <style type="text/css">
    table{border-collapse:collapse}
    .colstyle1{background:red}
    .colstyle2{background:blue}
    .colstyle3{background:green}
    .colstyle4{background:orange}
    td,th{border:1px solid #000;padding:5px}
    
    </style>
    

    Then, have your HTML look like
          <col class="colstyle1" />
          <col class="colstyle1" />
          <col class="colstyle1" />
          <col class="colstyle2" />
          <col class="colstyle2" />
          <col class="colstyle2" />
          <col class="colstyle3" />
          <col class="colstyle3" />
          <col class="colstyle4" />
          <col class="colstyle4" />
    

    In place of applying a separate class for every column in the table?

    That's valid HTML, right? And a lot easier to code, as well as being lighter? Or am I way off?

    KrunkMcGrunk on
    mrsatansig.png
  • Sharp101Sharp101 TorontoRegistered User regular
    edited September 2010
    Either way looks valid.

    The first way does have 'more' CSS, but isn't abnormal. As far as CSS goes, it's still simple. It also has the benefit of allowing you to easily switch styles of each column as needed.

    Your second way looks cleaner, but down the line if you want to change the 3rd column to purple, you would have to go in and change your HTML.


    Basically both ways are valid, but the first way is more flexible. Saving a few characters in your CSS file isn't worth the loss of flexibility IMO.

    Sharp101 on
  • KrunkMcGrunkKrunkMcGrunk Registered User regular
    edited September 2010
    One more question. I read this on HTML Dog:
    You can make the tbody element scroll in Mozilla, by applying the style overflow: auto; max-height: [whatever] to it. You will then see the header and footer kept in place and a vertical scroll bar to the right of the body. You should use the max-height property because IE doesn't recognise it and so it is safer than using the height property, which IE would apply to every row.

    I just can't figure out where exactly I'm supposed to apply the style. Like, is it supposed to go in my CSS as:
    tbody {
    	overflow: auto; max-height: 5px;
    }
    

    Or does it go somewhere else? I know I have it wrong right now, as it does nothing.

    KrunkMcGrunk on
    mrsatansig.png
  • DranythDranyth Surf ColoradoRegistered User regular
    edited September 2010
    Yeah, that'll work, but you have to use the full table markup for it to do anything. Thus you'll need something like:
    <table>
     <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
     </thead>
     <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
     </tfoot>
     <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
     </tbody>
    </table>
    

    That way, when the table rows in <tbody> go beyond the height set in the CSS, it'll gain scrollbars, but only on that part. Anything in the thead and/or tfoot will remain in place.

    Edit: Slight correction, didn't realize tfoot has to go before tbody, never had to use it before.

    Dranyth on
  • DranythDranyth Surf ColoradoRegistered User regular
    edited September 2010
    Argh, double post.

    Dranyth on
  • KrunkMcGrunkKrunkMcGrunk Registered User regular
    edited September 2010
    That's what I thought, but it doesn't seem to work for me :(

    Here's my HTML
    <table>
    	<caption>How 'bout some scrolls, dawg?</caption>
    	<colgroup>
    	<col class="alternate" />
    	<col />
    	<col class="alternate" />
    	</colgroup>
    <thead>
    <tr>
    	<td>Header 1</td>
    	<td>Header 2</td>
    	<td>Header 3</td>
    </tr>
    </thead>
    <tfoot>
    <tr>
    	<td>Footer 1</td>
    	<td>Footer 2</td>
    	<td>Footer 3</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    	<td>Cell 1</td>
    	<td>Cell 2</td>
    	<td>Cell 3</td>
    </tr>
    <tr>
    	<td>Cell 21</td>
    	<td>Cell 22</td>
    	<td>Cell 23</td>
    </tr>
    <tr>
    	<td>Cell 31</td>
    	<td>Cell 32</td>
    	<td>Cell 33</td>
    </tr>
    <tr>
    	<td>Cell 41</td>
    	<td>Cell 42</td>
    	<td>Cell 43</td>
    </tr>
    <tr>
    	<td>Cell 51</td>
    	<td>Cell 52</td>
    	<td>Cell 53</td>
    </tr>
    </tbody>
    </table>
    

    Here's my CSS re: tables
    .alternate {
    	background: #C8FFFF;
    	border: 1px solid black;
    }
    
    table {
    	border-collapse: collapse;
    }
    
    caption {
    	border: 3px double #000;
    	padding: 2px;
    }
    
    tbody {
            overflow: auto; max-height: 5px;
    }
    
    td {
    	border: 1px solid #000;
    	padding: 5px;
    }
    

    KrunkMcGrunk on
    mrsatansig.png
  • DranythDranyth Surf ColoradoRegistered User regular
    edited September 2010
    Hmm... in theory that should work I'm pretty sure. Unless the max-height is just way too small, not even enough for one row to appear? That's the only thing that slightly stands out to me.

    What browser(s) are you viewing the tests in anyway? The only one that you have to do extra tricks in for the scrolling table body to work is IE7 and below I *think*.

    Dranyth on
  • KrunkMcGrunkKrunkMcGrunk Registered User regular
    edited September 2010
    I'm using it in Firefox.

    I just tried out this:
    tbody {
          height: 100px; 
          width: 100px;
          overflow: auto;
    }
    

    And it worked. Maybe I because I had overflow before I defined the table size? Or maybe max-height isn't a valid attribute?

    KrunkMcGrunk on
    mrsatansig.png
  • DranythDranyth Surf ColoradoRegistered User regular
    edited September 2010
    max-height is valid and supported in all major browsers though. Very weird, not sure why it wouldn't work like that.

    Dranyth on
  • SeguerSeguer of the Void Sydney, AustraliaRegistered User regular
    edited September 2010
    max-height: 5px might not have been giving it enough "room" to introduce the scrollbar?

    Krunk, might be an idea if you can find somewhere to upload these files when you're working on them, cos then we can take a look without having to replicate it ourselves.

    Oh - you've got Firebug and Web Developer toolbar, right? They're addons for Firefox and help lots.

    Seguer on
  • KrunkMcGrunkKrunkMcGrunk Registered User regular
    edited September 2010
    Seguer wrote: »
    max-height: 5px might not have been giving it enough "room" to introduce the scrollbar?

    Krunk, might be an idea if you can find somewhere to upload these files when you're working on them, cos then we can take a look without having to replicate it ourselves.

    Oh - you've got Firebug and Web Developer toolbar, right? They're addons for Firefox and help lots.

    I don't have those addons, but I will get them! I've heard them highly recommended.

    And, I think you might be right about 5px not being enough room to introduce the scrollbar. That's about the only thing I can think of.

    KrunkMcGrunk on
    mrsatansig.png
Sign In or Register to comment.