Вставка пустой строки таблицы с меньшей высотой

Question

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

Как мне это сделать?

Мой код разметки HTML для таблицы выглядит следующим образом:

<table class="action_table">
    <tbody>
        <tr class="header_row">
            <td>Header Item</td>
            <td>Header Item 2</td>
            <td>Header Item 3</td>
        </tr>            
        <tr class="blank_row">
            <td bgcolor="#FFFFFF" colspan="3">&nbsp;</td>
        </tr>
        <tr class="data_row">
            <td>Data Item</td>
            <td>Data Item 2</td>
            <td>Data Item 3</td>
        </tr>
    </tbody>
</table>

Answer 1

Просто добавьте правило CSS (и слегка улучшенную разметку), опубликованное ниже, и вы получите желаемый результат.

CSS

.blank_row
{
    height: 10px !important; /* overwrites any other rules */
    background-color: #FFFFFF;
}

HTML

<tr class="blank_row">
    <td colspan="3"></td>
</tr>

Поскольку я понятия не имею, как выглядит ваша текущая таблица стилей, я на всякий случай добавил свойство !important.Однако, если это возможно, вы должны удалить его, так как редко требуется полагаться на объявления !important в таблице стилей, учитывая большую вероятность того, что они испортят это позже.

Answer 2

Вам не нужна дополнительная строка таблицы, чтобы создать пространство внутри таблицы. Смотрите этот jsFiddle .
(Я сделал зазор светло-серым, чтобы вы могли его видеть, но вы можете изменить его на прозрачный.)

Использование строки таблицы только для отображения - злоупотребление таблицей!

Answer 3

Попробуйте это:

<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3>&nbsp;</td>

Answer 4

Я знаю, что на этот вопрос уже есть ответ, но я нашел еще более простой способ сделать это.

Просто добавьте

<tr height = 20px></tr>

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

Answer 5

Этот работает для меня:

<tr style="height: 15px;"/>

Answer 6

Я хотел добиться того же, что и в этом вопросе, но принятый ответ не помог мне в May, 2018 (возможно, ответ слишком старый или по какой-то другой причине). Я использую bootsrap 3.3.7 и ionic v1. Вам нужно установить line-height, чтобы установить высоту определенного ряда.

.blank_row {
  line-height: 3px;
}

<table class="action_table">
  <tbody>
    <tr class="header_row">
      <td>Header Item</td>
      <td>Header Item 2</td>
      <td>Header Item 3</td>
    </tr>
    <tr class="blank_row">
      <td bgcolor="#000" colspan="3">&nbsp;</td>
    </tr>
    <tr class="data_row">
      <td>Data Item</td>
      <td>Data Item 2</td>
      <td>Data Item 3</td>
    </tr>
  </tbody>
</table>

Answer 7

Я не мог заставить что-либо работать, пока не попробовал эту простую строку:

<p style="margin-top:0; margin-bottom:0; line-height:.5"><br /></p>

, который позволяет варьировать высоту линии наполнителя в соответствии с содержанием вашего сердца (Я был [вероятно, MISusing Table, чтобы получить три столбца (блока) текста, которые я затем хотел выстроить вдоль нижней части)

Я любитель, поэтому буду благодарен за комментарии