带有 table-layout 的表格：固定;以及如何使一列更宽-解网

问：

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

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

html css xhtml

答：

9赞 Jason Gennaro 6/6/2011 #1

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

但如果没有，我建议转储和更改您的 css，如下所示：table-layout: fixed;

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/

1赞 Richard Knop 6/7/2011

这不能正常工作。看看 8、9、10、11 列，它们太窄了。

0赞 Jason Gennaro 6/7/2011

明白了。您可以通过将内容放在跨越四个 s 中来解决这个问题，如下所示：将设置为所有单个 s 的总和。请看这里 jsfiddle.net/6p9K3/2tdth<div style="width:80px;">Richard Knop</div>widthtd

5赞 kei 6/6/2011 #2

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

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

基本上，将表拆分为两个表，并将其包含在另一个表中。

25赞 user1721135 6/5/2013

嵌套表是最好的表

0赞 alistair 9/17/2019

我知道这是伪代码，但作为像 Pug.js 这样的 HTML 框架，这将是非常棒的！

110赞 clairesuzy 6/6/2011 #3

您可以只给第一个单元格（因此是列）一个宽度，其余的默认为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>

0赞 clairesuzy 6/7/2011

是的，似乎 - 当然，无论如何，该技术确实如此：**请参阅更新的小提琴 - 然后使用 Colspan 方法，您也可以根据需要设置其他列宽col

21赞 Jonathan de M. 9/16/2015

如果你有一个宽度应该设置在其theadth

0赞 malisokan 3/23/2017

如果有可用的表格标题，则不起作用：<table><caption>...</caption><tbody>....</tbody></table>

2赞 Zach Saucier 2/15/2020

只需使用 .无需两个选择器。还要记住，表格的第一行决定了宽度。td:first-of-type { width: 150px; }table-layout: fixed

2赞 J215D 7/27/2020

@ZachSaucier在这里提出了一个非常重要的观点，很容易被忽视。您可以通过将 table-layout： fixed 设置为该特定行来指定浏览器开始查看宽度的行。我看到的其他任何地方都只说“它开始看第一个细胞”。

61赞 kta 6/10/2013 #4

table-layout： fixed 的重要一点是列宽由表的第一行决定。

所以

如果您的表结构如下（标准表结构）

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

请注意，我们的样式是 th 而不是 td。

2赞 Paramvir Singh Karwal 12/15/2017

大提示表 tr th：nth-child（4）

上一个：芹菜获取已注册任务列表

下一个：ImportError：没有名为 mock 的模块

带有 table-layout 的表格：固定;以及如何使一列更宽

Table with table-layout: fixed; and how to make one column wider

评论

评论

评论

评论

评论