it-swarm.com.ru

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

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

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

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

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

48
Tom

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

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

8
Mr Lister

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

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

<tr height = 20px></tr>

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

6
Alwin G

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

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

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

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

Я хотел добиться того же, что и в этом вопросе, но принятый ответ не работал для меня в 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>

0
VicJordan