带表格的表格：固定;如何使一列宽

Question

所以我有一个表，这种风格：

table-layout: fixed; 

这使得所有列是相同的宽度。我想有一列（第一个）变宽，然后剩下的列占据表格的剩余宽度，宽度相等。

如何实现这一目标？

table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    background: #ddd; 
 
    table-layout: fixed; 
 
} 
 

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

 
table td.wideRow, table th.wideRow { 
 
    width: 300px; 
 
}

<table class="CalendarReservationsBodyTable"> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="97">Rezervovane auta</th> 
 
    </tr> 
 
    <tr> 
 
     <th class="corner wideRow">Auto</th> 
 
     <th class="odd" colspan="4">0</th> 
 
     <th class="" colspan="4">1</th> 
 
     <th class="odd" colspan="4">2</th> 
 
     <th class="" colspan="4">3</th> 
 
     <th class="odd" colspan="4">4</th> 
 
     <th class="" colspan="4">5</th> 
 
     <th class="odd" colspan="4">6</th> 
 
     <th class="" colspan="4">7</th> 
 
     <th class="odd" colspan="4">8</th> 
 
     <th class="" colspan="4">9</th> 
 
     <th class="odd" colspan="4">10</th> 
 
     <th class="" colspan="4">11</th> 
 
     <th class="odd" colspan="4">12</th> 
 
     <th class="" colspan="4">13</th> 
 
     <th class="odd" colspan="4">14</th> 
 
     <th class="" colspan="4">15</th> 
 
     <th class="odd" colspan="4">16</th> 
 
     <th class="" colspan="4">17</th> 
 
     <th class="odd" colspan="4">18</th> 
 
     <th class="" colspan="4">19</th> 
 
     <th class="odd" colspan="4">20</th> 
 
     <th class="" colspan="4">21</th> 
 
     <th class="odd" colspan="4">22</th> 
 
     <th class="" colspan="4">23</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="alignRight wideRow">KE-260 FC - Octavia combi</td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td colspan="16" class="highlighted borderLeft" title="Richard Knop"> 
 
     Richard Knop 
 
     </td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td colspan="14" class="highlighted" title="Richard Knop"> 
 
     Richard Knop 
 
     </td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
     <td class=" borderLeft"></td> 
 
     <td class="odd"></td> 
 
     <td class=""></td> 
 
     <td class="odd"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

的jsfiddle：http://jsfiddle.net/6p9K3/

通知的第一列，我希望它是300px宽。

Answer 1

你可以只给第一个单元格（因此列）的宽度，并有其余默认为auto

table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
td { 
 
    border: 1px solid #000; 
 
    width: 150px; 
 
} 
 
td+td { 
 
    width: auto; 
 
}

<table> 
 
    <tr> 
 
    <td>150px</td> 
 
    <td>equal</td> 
 
    <td>equal</td> 
 
    </tr> 
 
</table>

---

或可替代的“正确的方式”来获得列宽度可能是使用col element本身

table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
td { 
 
    border: 1px solid #000; 
 
} 
 
.wide { 
 
    width: 150px; 
 
}

<table> 
 
    <col span="1" class="wide"> 
 
    <tr> 
 
     <td>150px</td> 
 
     <td>equal</td> 
 
     <td>equal</td> 
 
    </tr> 
 
</table>

Answer 2

您是否正在创建一个非常大的表（数百行和列）？如果是这样，是一个好主意，因为浏览器只需要读取第一行以计算和渲染整个table，所以加载速度更快。

但如果没有，我会建议倾销，改变你的CSS如下：

table th, table td{ 
border: 1px solid #000; 
width:20px; //or something similar 
} 

table td.wideRow, table th.wideRow{ 
width: 300px; 
} 

http://jsfiddle.net/6p9K3/1/

Answer 3

你可以做的是这样的（伪）：

<container table> 
    <tr> 
    <td> 
     <"300px" table> 
    <td> 
     <fixed layout table> 

基本上，将表分成两个表，并让它包含在另一个表中。

Answer 4

表格的布局的最重要的：固定的是，柱宽度由表的第一行确定的。

所以

，如果你的表结构如下（标准表结构）

<table> 
    <thead> 
     <tr> 
      <th> First column </th> 
      <th> Second column </th> 
      <th> Third column </th>   
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td> First column </td> 
      <td> Second column </td> 
      <td> Third column </td>   
     </tr> 
    </tbody> 

，如果你想给的宽度过第二栏则

<style> 
    table{ 
     table-layout:fixed; 
     width: 100%; 
    } 

    table tr th:nth-child(2){ 
     width: 60%; 
    } 

</style> 

请看看我们风格的不是td。