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

Question

注意：我正在使用渲染引擎将我的 html 渲染为 PDF，默认情况下禁用 JavaScript，因此我严格使用 *.css 寻找答案。

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

• 第一列是计数器（例如1.、2.、最多n.），其范围最多为 3 位。
• 第 2 列是 12 位参考编号。
• 第 3 列是上一列参考编号的地址，可以为空或至少 50 个字符长。
• 倒数第 4 列包含金额/货币/价格数据，最小值为 0.00，最大值可以变化为最多 8 位，以逗号分隔的数字分组。

现在假设表格的宽度需要为 1024 像素（根据*.pdf 渲染引擎提供的要求而有所不同）。在这一点上，我想：

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

我试图给每列固定宽度（总共 1024 像素），并且我设法通过 *.css 使用省略号溢出，但有些空间被浪费了，我想避免这些：

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

Answer 1

你可以用 % 来给出宽度，但除非你设置一个 min-width: in 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 中在表格周围添加一个容器

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