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

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

这可以通过添加样式表布局：固定到表元素来处理，而不是为希望均匀划分固定列之后剩余宽度的列指定任何宽度值。

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

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

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

Answer 4

没有人这里提到该一个<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 5

在我看来，简单，好用和简单的方法是不要同时使用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 6

那么在创建表格或其他一些事件（如点击）发生后，使用jQuery并调用javascript函数怎么样？

看到这里 （我为此创建了jsfiddle游乐场）

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