My first table!

I’m having my very first attempt at creating a table, and leaving aside what I seem to remember about not being SEO friendly (I will change things later) I wonder if you could help me reduce the width of the 1st and 3rd cells. How do you differentiate the cells in a row?

I tried width in front of td, but just read that it is not supported in html5. So, how do I differentiate cells within the same row in css?

http://pintotours.net/Zork/Table.html

Thank you

You can use selector with :nth-child for that:

/* make first cell in row 80px wide */
tr td:nth-child(1),
tr th:nth-child(1) { width:80px; }

/* make third cell in row 100px wide */
tr td:nth-child(3),
tr th:nth-child(3) { width:100px; }

Or, you can add classes for your <th> tags and set width for them. When you change width for <th> in that case whole column will be resized as well.

Hi megazoid

Magic! Many thanks!

The only problem is that it does not seem to work with IE9. I’m not sure about IE8.

Any work-arounds?

For IE9 you can add this to your <head>:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

IE8 doesn’t support pseudoselectors like nth-child at all, it can be fixed with JS only.
If you care about IE8 use classes instead:

 <table>
      <thead>
           <tr>
                <td class="col-1">First</td>
                <td class="col-2">Second</td>
                <td class="col-3">Third</td>

CSS:

.col-1 { width: 80px; }
.col-3 { width: 100px; }

Perfect!

IE8 will have to wait as I want to get this bit on the road and do not have an IE8 computer with me now.

Many, many thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.