Как изменить ширину столбцов таблицы?

Question

У меня очень большой стол, который мне нужно включить в прототип. Как изменить ширину столбцов? Мои попытки использования CSS не сработали.

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

Я понял это. Необходимо определить ширину таблицы.

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

Если стиль непосредственно в HTML-м не меняет ширины всех collumns?

Подобно:

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

Answer 3

Попробуйте использовать <Col> ширина атрибута:

Пример

<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> 

присвоенный
w3schools.com

Answer 4

Установите свойство таблицы макета следующим образом:

table 
{ 
table-layout:fixed; 
} 

Затем в первой строке, определять ширину:

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