1. 首页
  2. 问题
  3. 带有表格布局的表格：固定；以及如何使一栏变宽
小编典典

带有表格布局的表格：固定；以及如何使一栏变宽

css

所以我有一张这种风格的桌子：

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>

注意第一列，我希望它要300px宽。


阅读 327

收藏
2020-05-16

共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元素本身

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>
2020-05-16