Удаление интервала между ячейками таблицы только для одной строки

Question

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

<table>
  <tr>
    <!-- I'd like these cells to NOT have any space between them -->
    <td>ColHeader1</td>
    <td>ColHeader2</td>
    <td>ColHeader3</td>
  </tr>
  <tr>
    <!-- I'd like these cells to have normal spacing -->
    <td>NormalCol1</td>
    <td>NormalCol2</td>
    <td>NormalCol3</td>
  </tr>
</table>

Я пытался установить отступ в 0 в строке и в ячейках, но это ничего не делает для меня. Свойство border-collapse может быть применено только к элементу таблицы, то же самое относится и к border-spacing.

Answer 1

Пожалуйста, попробуйте использовать таблицы лучше.Так что, если у вас есть заголовок в вашей таблице, сделайте так:

<table>
  <thead>
    <tr>
      <th>header 1</th>
      <th>header 2</th>
       ...
    </tr>
  </thead>
  <tbody>
    (table content goes here>
  </tbody>
</table>

Теперь вы можете легко разделить стили для заголовка и тела таблицы.

<thead> сделано специально для заголовков таблицыпотому что они широко используются.Если в вашей таблице есть нижний колонтитул, вы также можете использовать тег <tfoot> (но имейте в виду, что он должен появляться перед тегом <tbody>).

Надеюсь, это то, что вы ищетеза.

Редактировать: Еще одна возможность - создать две таблицы: одну для заголовков и одну для содержимого.Вы также можете сделать заголовки из элементов div и оформить их в стиле таблицы.Как указано в комментариях, невозможно применять различные значения cellspacing или cellpadding.

<table cellspacing="0">
  (headers)
</table>
<br />
<table cellspacing="2">
  (content)
</table>

Еще один вариант - создать всю таблицу из div элементов, но для табличного содержимого лучше использовать table.

Answer 2

вы можете использовать <th> (заголовок таблицы) вместо <td> s в первой строке таблицы и нацелить ее с помощью css.кроме того, есть css first-child selector (не совместим со всеми браузерами)

table tr:first-child td{
   /* css code for no spacing here */
}