CODEWITHSUNDEEP
htmlcss
M. Araújo
M. Araújo

Reputation: 51

Table header not displaying columns at 100% width

I'm trying to make a table with a scrollbar in the body of my table. I've made the code below for it. The scrollbar works just fine, the problem is that for thead, the columns don't appear with the correct (appear a lot smaller than for tbody (that uses 100% of the width). Any idea why it works for the body but not the header?

<table style="width:100%;">
  <thead style="width:100%;display:block;"> 
    <tr>
      <th style="width:70%;">Description</th>
      <th>Task appears on</th>
    </tr>
  </thead>
  <tbody style="width:100%; height:300px;overflow-y:scroll;display:block;">
    <tr>
      <td style="width:70%;">Test1</td>
      <td> Test2</td>
    </tr>
  </tbody>
</table>

<table class="dash-task-list" style="width:100%;"><thead style="width:100%; display:block;"> <tr><th class="dash_description" style="width:70%;">Description</th><th class="dash_tasks_appear">Task appears on</th></tr></thead><tbody style="width:100%; height:300px; overflow-y:scroll; display:block;"></tbody></table>

Upvotes: 5

Views: 772

Answers (1)

Mr.Baqaisooo
Mr.Baqaisooo

Reputation: 117

UPDATE

This is will solve your problem .. good luck

.first-td{
  width:70%
}

.second-td{
  width:30%
}

tbody tr{
  display: flex
}
<table style= "width:100%">
  <thead>
    <tr >
      <th class="first-td">Col 1</th>
      <th class="second-td">Col 2</th>
    </tr>
  </thead>
  <tbody style="display:block; width:100%; position:fixed; overflow: auto; height: 100px;">
    <tr>
      <td class="first-td">row 2-0</td>
      <td class="second-td">row 2-1</td>
    </tr>
    <tr>
      <td class="first-td">row 2-0</td>
      <td class="second-td">row 2-1</td>
    </tr>
    <tr>
      <td class="first-td">row 2-0</td>
      <td class="second-td">row 2-1</td>
    </tr>
    <tr>
      <td class="first-td">row 2-0</td>
      <td class="second-td">row 2-1</td>
    </tr>
    <tr>
      <td class="first-td">row 3-0</td>
      <td class="second-td">row 3-1</td>
    </tr>
    <tr>
      <td class="first-td">row 4-0</td>
      <td class="second-td">row 4-1</td>
    </tr>
    <tr>
      <td class="first-td">row 5-0</td>
      <td class="second-td">row 5-1</td>
    </tr>
    <tr>
      <td class="first-td">row 6-0</td>
      <td class="second-td">row 6-1</td>
    </tr>
  </tbody>
</table>

Upvotes: 3

Related Questions