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

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

Как я могу это сделать?

Мой код разметки 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>

Ответ 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 в таблице стилей, учитывая большую вероятность того, что позже они будут испорчены.

Ответ 2

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

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

Ответ 3

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

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

<tr height = 20px></tr>

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

Ответ 4

Попробуйте следующее:

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

Ответ 5

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

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

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

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