How can I change a table's column widths?

Question

I have a very large table that I need to include in a prototype. How do I change the column widths? My attempts using CSS have not worked.

http://jsbin.com/lebokewi/1/edit?html,css,output

CSS

table, th, tr, td {
  border: 1px solid #000;
}

#colHdr th:nth-of-type(1) {width: 100px;}
#colHdr th:nth-of-type(2) {width: 50px;}
#colHdr th:nth-of-type(3) {width: 200px;}
#colHdr th:nth-of-type(4) {width: 60px;}
#colHdr th:nth-of-type(5) {width: 80px;}

Answer 1

I figured it out. The table width needed to be defined.

table {
  width: 3000px;
}

table, th, tr, td {
  border: 1px solid #000;
}

#colHdr td:nth-of-type(1) {width: 100px; color: green;}
#colHdr td:nth-of-type(2) {width: 250px; color:blue}
#colHdr td:nth-of-type(3) {width: 80px; color: orange}
#colHdr td:nth-of-type(4) {width: 175px; color: purple}
#colHdr td:nth-of-type(5) {width: 175px; color:red;}

Answer 2

Try using <col> width attribute:

Example

<table>
    <col width="130">
    <col width="80">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$80</td>
    </tr>
</table>

Reference
w3schools.com

Answer 3

If you style directly in the html the th doesn't change the widths of all collumns?

Like so:

<th style="width:30%"></th>

Answer 4

Set your table-layout property like so:

table
{
table-layout:fixed;
}

Then in your first row, define your widths:

<tr>
  <th width="5%">Hey</th><th width="95%">Hello, big row</th>
</tr>