Блог

Главная - Вопросы по программированию - исправлена ошибка с rowspan

исправлена ошибка с rowspan

#css #html-table #fixed-header-tables

#css #html-таблица #исправлен заголовок-таблицы

Вопрос:

У меня есть эта таблица:
введите описание изображения здесь
и я хотел бы исправить ошибку следующим образом:
введите описание изображения здесь
но я понимаю это:
введите описание изображения здесь
вот мой код:

 .table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 0;
}

.table th {
  background: #EEE;
  text-align: left;
}

.table th,
td {
  height: 30px;
}

.fixed_thead {
  table-layout: fixed;
}

.fixed_thead tbody {
  display: block;
  width: 100%;
  height: 100px;
  overflow: auto;
}

.fixed_thead thead tr {
  display: block;
}

.fixed_thead th,
.fixed_thead td {
  width: 200px;
}  
 <table class="table fixed_thead" border=1>
  <thead>
    <tr>
      <th rowspan=2>cell</th>
      <th rowspan=2>cell</th>
      <th rowspan=2>cell</th>
      <th rowspan=2>cell</th>
      <th rowspan=2>cell</th>
      <th colspan=3 style="width:30%; text-align:center; border-bottom:1px solid rgba(0,0,0,.5);">cell</th>
    </tr>
    <tr>
      <th style="width:33.33%;">cell</th>
      <th style="width:33.33%;">cell</th>
      <th style="width:33.33%;">cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tbody>
</table>

что я делаю не так?

Комментарии:

1. Это потому, что вы меняете trs на display block — поэтому они больше не являются строками таблицы

2. понятно, так как я могу получить таблицу на 2-м изображении? но с ths, выровненными по вертикали до tds

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