HTML 表格样式

Posted 2023-03-06

【中文标题】HTML 表格样式

【英文标题】：HTML Table Styling

【发布时间】：2013-01-04 19:43:03

【问题描述】：

我在为动态生成的表格设置样式时遇到了问题。用户可以选择必须有多少列，其中一些具有固定长度。我怎样才能让另一个给出剩余空间的百分比，而不必每次都指定列的确切宽度，并且不会以不同的数据/不同的浏览器结束不同的列宽？

例子：

<style type="text/css">
table
    width:800px;
    border:1px solid #CCCCCC;
   /* table-layout: fixed; */


table td 
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border:1px solid #EEEEEE;


table tbody td.active
    text-align:center;
    width:100px; /* fixed */


table tbody td.option
    width:100px; /* fixed */



table tbody td.nonfixed
    width:auto;

</style>
<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Description</td>
            <td>Active</td>
            <td colspan="2">Options</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5"><a href="">+ Add new row</a><td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td class="nonfixed">[Name 1]</td>
            <td class="nonfixed">[Description 1]</td>
            <td class="active">[X]</td>
            <td class="option">Edit</td>
            <td class="option">Delete</td>
        </tr>
        <tr>
            <td class="nonfixed">[Name 2]</td>
            <td class="nonfixed">[Description 2]</td>
            <td class="active">[0]</td>
            <td class="option">Edit</td>
            <td class="option">Delete</td>
        </tr>
    </tbody>
</table>

在示例中，两个“非固定”列应具有完全相同的宽度。当用户添加非固定列或将第一列与最后一列等切换时，这也应该起作用。

谁能帮帮我？

【问题讨论】：

几乎可以肯定，您将需要 javascript 来实现这一目标。您在该领域尝试过什么？

解决这个问题时出现了以下问题：***.com/questions/14444436/…

【参考方案1】：

我看到了两种可能的方法......要么使用脚本来计算灵活宽度列的宽度并将它们平均，要么使用嵌套表将两个 flex cols 拆分为 50%：

<table>
  <tr>
    <td class="fixed"></td>
    <td class="fixed"></td>
    <td class="fixed"></td>

    <td class="flex-wrapper">
      <table >
        <tr>
          <td ></td>
          <td ></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

【讨论】：

当我应用“table td.nonfixed width:100%; ”时，这适用于元素。唯一的问题是 Chrome 确实要求 thead 元素具有宽度。

在父表上？可以用 width:auto; 吗？