html - TH 在表固定标题中不起作用

标签 html css html-table fixed-header-tables

我正在尝试创建一个带有固定标题的表格。我已经完成了所有的事情，但我的标题没有扩展为全宽。 这是我的代码和演示:

我需要让 tr 适合 100% 宽度，th/td 覆盖所有可用空间。

.fixed_headers {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #ccc;
  display: block;
}
.fixed_headers td {
    border-bottom: 1px solid #f00;
}


.fixed_headers tr{
  display: flex !important;
  width: 100%;
  
}

.fixed_headers thead {
  background-color: #f00;
  color: #fdfdfd;
}

.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 20%;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 30%;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 20%;
}
.fixed_headers td:nth-child(4),
.fixed_headers th:nth-child(4) {
  width: 30%;
}
table.fixed_headers thead tr {
  display: block;
  position: relative;
}
table.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}

.fixed_headers tbody::-webkit-scrollbar {
    width: 8px;
}

.fixed_headers tbody::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #f00;
}
<table class="fixed_headers">
  <thead>
    <tr>
      <th>DATA</th>
      <th>NOME COMPLETO</th>
      <th>TELEFONE</th>
      <th>PRÊMIO</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
  </tbody>
</table>

最佳答案 

.fixed_headers {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #ccc;
  display: block;
}
.fixed_headers td {
    border-bottom: 1px solid #f00;
}


.fixed_headers tr{
  display: flex !important;
  width: 100%;
  
}

.fixed_headers thead {
  background-color: #f00;
  color: #fdfdfd;
  width:100%;
  float:left;
}

.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 20%;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 30%;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 20%;
}
.fixed_headers td:nth-child(4),
.fixed_headers th:nth-child(4) {
  width: 30%;
}
table.fixed_headers thead tr {
  display: block;
  position: relative;
}
table.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}

.fixed_headers tbody::-webkit-scrollbar {
    width: 8px;
}

.fixed_headers tbody::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #f00;
}
<table class="fixed_headers">
  <thead>
    <tr>
      <th>DATA</th>
      <th>NOME COMPLETO</th>
      <th>TELEFONE</th>
      <th>PRÊMIO</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
    <tr>
      <td>15/01</td>
      <td>Castello Branco</td>
      <td>(21) 99612-xxx</td>
      <td>1000 REAIS</td>
    </tr>
  </tbody>
</table>

关于html - TH 在表固定标题中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42548162/

上一篇：javascript - Bootstrap 下拉菜单不折叠菜单

下一篇：css - 将 Bootstrap 模式放入 div 包装器而不是 body

相关文章：

javascript - 无法动态更改图像

Javascript - 粘性按钮取决于标题宽度

javascript - 同一页面上两个日历的不同设计

html - 如何在表格的 tbody/thead 部分周围创建边框？

html - 如何设置图标旁边的列表和段落的样式？

html - Div 内的表格 - 不是 Div 元素的 100% 宽度

html - Bootstrap - 在 .fluid-container 内带有盒装网格的 Div

html - 我需要固定宽度和右侧复选框的水平滚动条

html - 在 Django 中为 <table> 设置列宽

php - 从表单信息创建自定义 md5 用户 ID

©2024 IT工具网  联系我们