使用 CSS 动态调整 html 表的列宽

Question

Note: I'm using a rendering engine to render my html to PDF that disables JavaScript by default, so I'm strictly looking for answers using *.css.

在我的报告中，我有一个 table 用于会计目的，有 11 列：

第 1 列用于计数器（例如 1.、2.，最多 n.），最多可显示 3 位数字。
第 2 列是 12 位参考编号。
第 3 列用于上一列参考号的地址，可以为空或至少 50 个字符长。
倒数第 4 列包含 amount/currency/price 数据，最小值为 0.00，最大值最多可变化 8 位，以逗号分隔的数字分组。

现在假设 table 的宽度需要为 1024px（根据 *.pdf 渲染引擎提供的要求而变化）。关于这一点，我想：

自动使第 1、2、4 列到最后一列根据内容计算它们的宽度（这使得相同的报告具有不同的列宽，具体取决于生成时最长的列内容）。
第3列会根据原来的1024px剩余的宽度进行相应调整，并在行尾添加省略号以防溢出（重要）.

我试图给每列固定宽度（总共 1024px），我设法通过 *.css 使用省略号溢出，但是一些 space 被浪费了，我想避免这些:

无论内容是否为 0.00，我都将第 4 列到最后一列静态分配为 75px / 100px / 125px（注意第 5、8、9 和 10 列可以减少到其原始宽度的一半） .

Answer 1

你可以做些什么来给出以 % 为单位的宽度，但除非你设置一个最小宽度：以 px 之类的东西，否则这将崩溃。

//CSS
.col1{
  //the width you might need to play with it so it add up to 100% of the container
  width:5%;

  //this value will depend on the max nth number the table will display
  //plus it padding if you want some space form the number to the border
  min-width:20px;   
}
.container{
  width: 1024px;
  margin: auto;
}
#MyTable{
  width: 100%;
}

并对所有其他列执行相同操作！！！！

还有在 HTML 周围添加一个容器 table

<div class="container">
  <table id="MyTable">
    <caption>table title and/or explanatory text</caption>
        <thead >
            <tr>
                <th id="col1">nth</th>
                <th id="col2">ID number</th>
                <th>Address</th>
                <th>Price 1</th>
                <th>Price 2</th>
                <th>Price 3</th>
                <th>...</th>
                <th>...</th>
                <th>...</th>
                <th>...</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>100</td>
                <td>201532112009</td>
                <td>Avenida Primera/ SOme address</td>
                <td>14.153,00</td>
                <td>0.00</td>
                <td>9.000</td>
                <td>and</td>
                <td>others</td>
                <td>others</td>
                <td>others</td>
            </tr>
        </tbody>
  </table>
</div>

使用 CSS 动态调整 html 表的列宽

Dynamic resizing of column width of html tables using CSS

html

css

html-table