CODEWITHSUNDEEP
htmlcsshtml-tablefixed-header-tables
user5553308
user5553308

Reputation:

TH not working in Table fixed header

I am trying to create a table with fixed header. I have done all the things but my header not expending as full width. Here is my code and demo:

I need to have tr fit to 100% width and th/td cover all available space.

.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>

Upvotes: 0

Views: 150

Answers (2)

Karthik Kalyan
Karthik Kalyan

Reputation: 32

.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>

Upvotes: 1

Prajapati Ghanshyam
Prajapati Ghanshyam

Reputation: 142

add css

thead {
    width: 100%;
    float: left;
}

Upvotes: 0

Related Questions