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

78

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

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 
— 理查德·诺普
source

Answers:

86

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

— clairesuzy
source
是的-col不管怎么说，该技术确实可以做到：**查看更新的提琴-使用colspan方法，您还可以根据需要设置其他列宽
— clairesuzy 2011年
13
如果您有thead宽度，则应在其上设置宽度th
— Jonathan de M.
如果有可用的字幕，则不起作用：<table><caption>...</caption><tbody>....</tbody></table>
— malisokan
2
只需使用td:first-of-type { width: 150px; }。不需要两个选择器。还请记住，表的第一行用于table-layout: fixed确定宽度。
— Zach Saucier
1
@ZachSaucier在这里很重要，很容易忽略。您可以通过设置固定于该特定行的table-layout：来指定浏览器开始查看宽度的行。我在其他任何地方都只看到“它开始看第一个单元格”。
— J215D
40

表格布局的重要事项：固定的是，列宽由表格的第一行确定。

所以

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

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

— ta
source
2
很棒的小桌tr：nth-​​child（4）
— Paramvir Singh Karwal '17
7

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

但是，如果没有，我建议table-layout: fixed;按照以下方式转储和更改您的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/

— 杰森·根纳罗（Jason Gennaro）
source
1
那不能正常工作。看一下8,9,10,11列，它们太窄了。
— 理查德·诺普
知道了。您可以通过将内容放在td跨越四个ths的内容中来解决此问题，如下所示：<div style="width:80px;">Richard Knop</div> 将设置width为所有单个tds的总和。看到这里jsfiddle.net/6p9K3/2
— Jason Gennaro
3

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

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

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

— ei
source
22
嵌套表是最佳表
— 2013年
我知道这是伪代码，但是像Pug.js这样的HTML框架绝对很棒！
— alistair
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.