HTML表格单元格不响应百分比宽度，但会响应像素宽度

Question

我正在使用我的CSS上的twitter bootstrap来处理我正在进行的项目。

正如您在我添加的图片中看到的那样，我的第三个单元格的宽度大于我添加的实际文本（我的引导程序css会自动截断）。我希望红线从我的蓝线所在的同一点开始。但由于我的细胞大小，这种情况被阻止了。

我的表格代码如下：

＆＃13;

＆＃13;

<table class="table bg-light table-sm table-responsive" style="width: 100%">
    <tbody style="width:100%">
    <tr style="width:100%">
        <th scope="row" style="width:5%">
            <div class="text-truncate" style="width: 100%">10.1</div>
        </th>

        <td>
            <div style="width: 95%">
            //...
            </div>
        </td>
    </tr>
    
    
    
    <tr style="width:100%">
        <th scope="row" style="width:5%">
            <div class="text-truncate" style="width: 100%">UNKNOWN</div>
        </th>

        <td>
            <div style="width: 95%">
            //...
            </div>
        </td>
    </tr>

    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

当我将div / th单元格和所有父标签中的宽度更改为像素值而不是百分比时，表格会执行我想要的操作（缩小单元格大小，以便红色条形图可以从蓝色条形图开始开始，单元格内的文本被截断）但是当它是百分比值时，th单元格保持与列中最大文本一样宽（在这种情况下，它表示＆＃34; UNKNOWN＆＃34;）。

Answer 1

您必须了解HTML表格将占用显示所有其中内容所需的空间（它不会截断它）。因此，如果表内容要求2000px，表将尊重它。因此，以百分比表示的单元格宽度将与表格宽度相对应。您可以真正控制表格单元格宽度的唯一方法是更改​​表格布局：

 table-layout: fixed;

但请注意，它不会像过去那样表现。有关固定表格布局的更多信息here。