html - 调整大小超过最大宽度的表格单元格

Question

我有一个表格，可以显示相机的名称及其型号。问题是，当名称/模型字符串太长时，单元格会调整大小，从而使表体与表头不同步。

<td>
    <div class="camera_details">
        <div class="camera_models">XXXCAMERAMODELXXX</div>
        <div class="camera_name">XXXCAMERANAMEXXX</div>
    </div>
</td>

它有这样的 CSS:

td{
    max-width: 144px;
}
.camera_details {
    max-width: 144px;
}
.camera_models {
    text-overflow: ellipsis;
    overflow: hidden;
}
.camera_name {
    text-overflow: ellipsis;
    overflow: hidden;
}
table {
    table-layout: fixed;
}

该问题仅存在于 IE8 上，其中 div 由于最大宽度而受到限制，但 td 元素没有，这仍然会导致表格未对齐。

无论子 div 的宽度如何，我都可以强制 td 具有一定的宽度吗？

Answer 1

在您的 table 中定义 table-layout:fixed;。像这样写:

table{
 table-layout:fixed;
}