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

是否使用 jQuery 来实现此目的，并在创建表或发生其他事件（如单击）后调用 javascript 函数？

请参阅此处（我为此创建了 jsfiddle 游乐场）

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