TH不在表固定标题中工作

时间：2017-03-02 06:19:39

标签： 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>

2 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
<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>
＆＃13; 
AlarmManger
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

添加css 

thead {
    width: 100%;
    float: left;
}
相关问题
最新问题