具有第一列固定宽度的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;
}

Answer 2

之前和之后的表格行空格。您可以使用以下方法清除它们：

.feedback-row:before {
  content: None;
}

.feedback-row:after {
  content: None;
}