Что не так с моим стилем заголовка таблицы?

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>

Тем не менее, когда таблица визуализируется, а не сам заголовок столбца, а текст с серым цветом, весь лишний пробел имеет нежелательный серый фон:

Когда я проверяю один из стилизованных заголовков в инструментах разработчика Chrome, я вижу, что ни одно из моих правил не было переопределено. Это единственный стиль во всем проекте, который я представил, а все остальное - это макет Bootstrap по умолчанию, используемый шаблоном проекта.

Как мне оформить эту таблицу, в частности ее строку заголовка, чтобы каждый заголовок представлял собой отдельный блок серого цвета с черным текстом без слияния со смежными заголовками?

Answer 1

Чтобы ячейки таблицы выглядели как отдельные блоки, и при условии, что вы не хотите, чтобы у строк tbody была граница, вы должны добавить следующий стиль:

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

Что касается дополнительныхинтервал, вся таблица не показана на скриншоте, и я могу только предположить, что где-то у вас есть длинный заголовок заголовка, который оборачивает и создает дополнительный интервал.