html - 第一列固定宽度的CSS表有无法解释的差距

Question

使用 Bootstrap 。重现 here

第一列定义如下:

.feedback-table tbody tr td:first-child {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    word-break: break-all;
}

您在 jsfiddle 中看到的 html 被发送为“更大”的 html 并包装在

Answer 1

其中的间隙是由 .row 类的::before 伪元素创建的。

这是来自 boostrap:

.row:before, .row:after {
    display: table;
    content: " ";
}

为什么需要 .row 类？剥离它，差距就会消失。如果你需要 .row 类，你也可以只指定 content: none;对于前后元素

.feedback-row:before, .feedback-row:after {
content:none;
}

稍后编辑:我已经看到您对约束的评论。为了能够指定表格的宽度，您需要指定要固定的表格布局。因此……

.feedback-table {font-family: 'Arimo', sans-serif;    font-size: 16px;    background-color: yellow;    margin: 15px;    direction: rtl;    text-align: right;    table-layout: fixed;}