我的表格标题样式有什么问题？

Question

我在视图上具有以下内联样式：

<style>
    .col-header {
        padding: 0 !important;
        margin: 0;
        background-color: #9d9d9d;
        text-align: center;
    }
</style>

然后我有两个此类的列标题：

<th class="col-header">
    Item Code
</th>
<th class="col-header">
    Item Description
</th>
<th>
    Unit
</th>
<th>
    Quantity
</th>

但是，当表呈现时，列标题本身不是bl; ac文本为灰色，而是有很多多余的空间具有不需要的灰色背景：

当我检查Chrome开发工具中的样式标题之一时，我发现没有任何规则被覆盖。这是我介绍的整个项目中唯一的样式，其他所有内容都是项目模板使用的默认Bootstrap布局。

如何设置此表的样式，尤其是它的标题行，以使每个标题都是带有黑色文本的单独的灰色块，而不会与相邻的标题合并？

Answer 1

为了使表格单元格看起来像是单独的块，并假设您不希望tbody行具有边框，则应添加以下样式：

.col-header {
  border-right:1px solid #fff; // updated with background color
}

关于额外的间距，整个表格未显示在屏幕截图中，我只能假设您在某个地方有一个长的标题标题，可以包装并创建额外的间距。