Question

是否可以使用宽度为100％的表格（因此表格符合屏幕尺寸），其中第一列和最后一列具有固定的宽度，其间的列取其余部分，均为50％。

像：

+--------------------+--------------------------------------+--------------------------------------+------------+
| width:300px;       | with dynamic, equals next column     | width dynamic, equals prevous column | width:50px;|
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+

Answer 1

试试这个：

正如您所看到的那样，由于table-layout:fixed，两个中间列保持相同的大小，即使内容的长度不同。尝试向两个中心列添加越来越少的内容。

JSFiddle：http://jsfiddle.net/RtXSh/

CSS

table {
    width:100%;
    border-collapse:collapse;
    table-layout:fixed; 
}

td {
    border: 1px solid #333;
}

HTML

  <table>
    <tr>
      <td style="width:300px;">
        test
      </td>
      <td>
        test test tes test test
      </td>
      <td>
        test
      </td>
      <td style="width:50px;">
        test
      </td>
    </tr>
  </table>

Answer 2

尝试使用伪元素first-child和last-child

如果我没有弄错的话，其他列将会自行调整。您可能需要使用first-child和last-child宽度后面的！important语句。

table{ table-layout: fixed; width: 100%; }
td { border: 1px solid black; }
td:first-child{ width: 100px; }
td:last-child{ width: 100px; }

<table>
    <tr>
      <td>100px</td>
      <td>some text</td>
      <td>some text</td>
      <td>100px</td>
    </tr>
</table>

然而，正如nurettin所指出的，如果你使用thead和tbody部分，你必须设置标题的样式。样式化td：first-child和td：last-child将不起作用。

table{ table-layout: fixed; width: 100%; }
td { border: 1px solid black; }
th:first-child{ width: 100px; }
th:last-child{ width: 100px; }

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>100px</td>
      <td>some text</td>
      <td>some text</td>
      <td>100px</td>
    </tr>
  </tbody>
</table>

Answer 3

在我看来，简单，好用且简单的方法是不要同时使用px和％。如果您使用表格宽度100％，则还要以％为单位定义第一列和最后一列的宽度。如果您对此感兴趣，请按以下步骤操作：

<强> CSS：

.mytable {
    width:100%;
    border: 1px solid green;
}

.left{
    width:30%;
    border-right:1px dashed blue;
}

.mid1{
   width:30%;
   border-right:1px dashed blue;

}

.mid2{
  width:30%;
   border-right:1px dashed blue;

}

.right{
    width: 10%;
    border-left:1px dashed blue;
}

<强> HTML：

<table class="mytable">
    <tr>
        <td class="left">Left Column, 30%</td>
        <td class="mid1">Mid 1, 30% </td>
        <td class="mid2">Mid 2, 30% </td>
        <td class="right">Right, 10%</td>
    </tr>
</table>

Answer 4

如果使用jQuery并在创建表或调用其他事件（如click）后调用javascript函数怎么样？

请参阅here（我为此创建了jsfiddle playground）

它的作用是检查固定元素的宽度（整个表格的宽度，第一个和最后一个单元格）。然后它计算并指定其余单元格的宽度，这些单元格应该具有在它们之间划分的剩余宽度（基于剩余的数量和剩余的空间）。当然，这只是可能解决方案的快速示例。它需要抛光（检查空对象，如果剩余宽度大于0，......）

Answer 5

这可以通过将样式 table-layout：fixed 添加到表元素来处理，而不是为希望均匀分割固定列之后剩余宽度的列指定任何宽度值已被计算在内。

此外，使用<colgroup>的组合可以提供强大的可变宽度场景。

我在JSFiddle创建了一个示例：https://jsfiddle.net/3bgsfnuL/1/

＆＃13;

<div style="position:relative; height:500px; width:100%;">
<table style="height:100%; width:100%; table-layout:fixed; text-align:center; border-collapse:collapse;">
  <colgroup colspan="1" style="width:200px"></colgroup>
  <colgroup colspan="3">
    <col/>
    <col style="width:30px"/>
    <col/>
  </colgroup>
  <colgroup colspan="1" style="width:200px"></colgroup>
  <tbody>
    <tr>
      <td style="background-color:silver;">left fixed</td>
      <td style="border-right:1px solid black;">col 1</td>
      <td style="background-color:red; color:white; border:1px solid black;">col 2</td>
      <td style="border-left:1px solid black;">col 3</td>
      <td style="background-color:silver;">right fixed</td>
    </tr>
  </tbody>
</table>
</div>

＆＃13;

Answer 6

此处没有人提到这个<th>技巧：

table{ table-layout: fixed; width: 100%; }
th:first-child{ width: 300px; }

<table>
  <thead>
    <tr>
      <th>yourfirst300pxcolumn</th>
      <th>fixedwidth</th>
      <th>fixedwidth also</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>300</td><td>something</td><td>something else</td></tr>
  </tbody>
</table>

Answer 7

请注意，在HTML5 / CSS3中，您可以使用grid layout来更好地控制表格。对于具有像素宽度的此特定示例，它并不是很有用，您可以像在Bazzz's answer中那样使用table-layout:fixed，但是如果要使用类似min-content的东西，则很有用。

以下内容在Chrome和Firefox上是开箱即用的，但在Safari中是不可用的：

table {
    width: 100%;
    display: grid;
    grid-template-columns: 300px 1fr 1fr 50px;

    /* Or, more usefully: */
    /* grid-template-columns: min-content 1fr 1fr min-content; */
}

td {
    display: block;
}

/* ignore <tr> when laying out the grid; just lay out the cells */
tr {
    display: contents;
}

/* browsers can inject <tbody> into the DOM even if it's not in the HTML */
tbody {
    display: contents;
}

（请注意，尽管表border-collapse属性在此布局中不起作用，所以您可能不得不摆弄:last-child之类的CSS伪类，以使边框的行为方式正确您想要的。）

在Safari中这不起作用-行无法正确中断。（尽管使用嵌套的<div>元素而不是<table>并应用相似的样式也可以使用。）但是，只有一个动态1fr列的更简单的布局在Safari中可以使用：< / p>

table {
  display: grid;
  grid-template-columns: 300px 1fr 50px;
}

tbody {
  display: contents;
}

tr {
  display: contents;
}

td {
  border: 1px solid #c0c0c0;
}

HTML表，第一列和最后一列固定宽度和动态之间的列，但宽度相等

7 个答案: