qim
April 23, 2015, 6:43am
1
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.
qim
April 23, 2015, 7:40am
3
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; }
qim
April 23, 2015, 7:55am
5
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
system
Closed
July 23, 2015, 3:00pm
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.