Вопрос:

HTML rowspan пропускает ячейки

html html-table

45 просмотра

1 ответ

1281 Репутация автора

Почему следующий HTML-код не производит таблицу, которую я ожидал?

Некоторые из моих камер пропускаются. Я хочу следующую таблицу ( https://jsfiddle.net/t4q801s7/1/ ). Единственное отличие в том, что я хочу использовать rowspan(например, Джонни и Сан-Диего не повторится).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">Johnny</td>
      <td>Bay Area</td>
    </tr>
    <tr>
      <td>New York</td>
    </tr>
    <tr>
      <td rowspan="2">San Diego</td>
    </tr>
    <tr>
      <td>Zack</td>
    </tr>
  </tbody>
</table>

Автор: Johnny Metz Источник Размещён: 12.04.2017 06:47

Ответы (1)


0 плюса

36776 Репутация автора

Ячейки таблицы имеют vertical-align:middleпо умолчанию, поэтому, если вы этого не хотите, вам придется изменить это в таблице стилей.
(По какой-то непостижимой причине, нам !importantздесь нужно . Извините.)

table, td, th {
  vertical-align: baseline !important; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">Johnny</td>
      <td>Bay Area</td>
    </tr>
    <tr>
      <td>New York</td>
    </tr>
    <tr>
      <td rowspan="2">San Diego</td>
    </tr>
    <tr>
      <td>Zack</td>
    </tr>
  </tbody>
</table>

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

Автор: Mr Lister Размещён: 12.04.2017 07:18
Вопросы из категории :
32x32