帶表格的表格：固定;如何使一列寬

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。