Столбцы css не совпадают с фиксированным заголовком

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

Мои конечные цели;

  1. иметь таблицу шириной страницы
  2. иметь статический статический
  3. иметь тело прокручиваемой таблицы

HTML

<table class="fixed_header">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
    </tr>
  </tbody>
</table>

CSS:

.fixed_header tbody{
  display:block;
  overflow:auto;
  height:100px;
  width:100%;
}
.fixed_header thead tr{
  display:block;
   height:20px;
}
table {
  border-collapse: collapse;
  width: 100%;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
  width: 100%;
}
table tbody{
  width: 100%;
}
table th {
background-color: #545556;
    color: white;
  padding: .425em;
  text-align: center;
}

table td {
  padding: .425em;
  text-align: center;
    word-wrap: break-word;
    font-size: 0.75em;
}

table th {
  font-size: .75em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

https://jsfiddle.net/ap4ognvz/6/

html,css,

0

Ответов: 1


0 принят

ДЕМО: https://jsfiddle.net/ap4ognvz/64/

Я добавил следующее к вашему CSS:

tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

Таким образом, ваш окончательный CSS будет выглядеть следующим образом:

.fixed_header tbody {
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100px;
}

.fixed_header thead tr {
  height: 20px;
}

table {
  border-collapse: collapse;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th {
  background-color: #545556;
  color: white;
  padding: .425em;
  text-align: center;
}

table td {
  padding: .425em;
  text-align: center;
  word-wrap: break-word;
  font-size: 0.75em;
}

table th {
  font-size: .75em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

Я отослал принятый ответ на этот вопрос .

HTML, CSS,
Похожие вопросы