Keep the table width same and column width based on header width - html

Question

I have a table which loads the data by crating all the elements inside the table dynamically. Something similar to datatable. Now, every time I regenerate the tbody for the next page, the column width changes based on text length and it changes the table width. I tried table-layout: fixed and td {width: 1%} but they don't work. I want to keep the table column width same as the header text width. How can I achieve that?
let tbody1 = document.getElementById('t-body-1')
let tbody2 = document.getElementById('t-body-2')
setInterval(function () {
tbody1.classList.toggle('no-display');
tbody2.classList.toggle('no-display');
}, 1000)
table {
border-collapse: collapse;
-webkit-box-shadow: #e2e2e2 0 10px 20px;
-moz-box-shadow: #e2e2e2 0 10px 20px;
box-shadow: #e2e2e2 0 10px 20px;
border-radius: 10px;
overflow: hidden;
/*table-layout: fixed;*/
/*width: 934px;*/
}
.r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th {
padding: 12px 25px;
text-align: left;
/*width: 1%;*/
overflow: hidden;
border-collapse: collapse;
}
.no-display {
display:none;
}
<div class="table-container" id="table-container">
<div class="r-header-controller"></div>
<table id="custom-table">
<thead class="r-thead">
<tr class="r-thead-tr">
<th class="r-thead-tr-th">Name</th>
<th class="r-thead-tr-th">Designation</th>
<th class="r-thead-tr-th">City</th>
<th class="r-thead-tr-th">Postal</th>
<th class="r-thead-tr-th">Start date</th>
<th class="r-thead-tr-th">Salary</th>
</tr>
</thead>
<tbody id="t-body-1" class="r-tbody">
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Brielle Williamson</td>
<td class="r-tbody-tr-td">Integration Specialist</td>
<td class="r-tbody-tr-td">New York</td>
<td class="r-tbody-tr-td">4804</td>
<td class="r-tbody-tr-td">2012/12/02</td>
<td class="r-tbody-tr-td">$372,000</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Herrod Chandler</td>
<td class="r-tbody-tr-td">Sales Assistant</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">9608</td>
<td class="r-tbody-tr-td">2012/08/06</td>
<td class="r-tbody-tr-td">$137,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Rhona Davidson</td>
<td class="r-tbody-tr-td">Integration Specialist</td>
<td class="r-tbody-tr-td">Tokyo</td>
<td class="r-tbody-tr-td">6200</td>
<td class="r-tbody-tr-td">2010/10/14</td>
<td class="r-tbody-tr-td">$327,900</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Colleen Hurst</td>
<td class="r-tbody-tr-td">Javascript Developer</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">2360</td>
<td class="r-tbody-tr-td">2009/09/15</td>
<td class="r-tbody-tr-td">$205,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Sonya Frost</td>
<td class="r-tbody-tr-td">Software Engineer</td>
<td class="r-tbody-tr-td">Edinburgh</td>
<td class="r-tbody-tr-td">1667</td>
<td class="r-tbody-tr-td">2008/12/13</td>
<td class="r-tbody-tr-td">$103,600</td>
</tr>
</tbody>
<tbody id="t-body-2" class="r-tbody no-display">
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Jena Gaines</td>
<td class="r-tbody-tr-td">Office Manager Office Manager</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">3814</td>
<td class="r-tbody-tr-td">2008/12/19</td>
<td class="r-tbody-tr-td">$90,560</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Quinn Flynn</td>
<td class="r-tbody-tr-td">Support Lead</td>
<td class="r-tbody-tr-td">Edinburgh</td>
<td class="r-tbody-tr-td">9497</td>
<td class="r-tbody-tr-td">2013/03/03</td>
<td class="r-tbody-tr-td">$342,000</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Charde Marshall</td>
<td class="r-tbody-tr-td">Regional Director</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">6741</td>
<td class="r-tbody-tr-td">2008/10/16</td>
<td class="r-tbody-tr-td">$470,600</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Haley Kennedy</td>
<td class="r-tbody-tr-td">Senior Marketing Designer</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">3597</td>
<td class="r-tbody-tr-td">2012/12/18</td>
<td class="r-tbody-tr-td">$313,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Tatyana Fitzpatrick</td>
<td class="r-tbody-tr-td">Regional Director</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">1965</td>
<td class="r-tbody-tr-td">2010/03/17</td>
<td class="r-tbody-tr-td">$385,750</td>
</tr>
</tbody>
<tfoot class="r-tfoot">
<tr class="r-tfoot-tr">
<th class="r-tfoot-tr-th r-text-right" colspan="5" rowspan="1">Total</th>
<th class="r-tfoot-tr-th" colspan="1" rowspan="1">$2,120,754</th>
</tr>
</tfoot>
</table>
<div class="r-footer-controller">
</div>
</div>

Answer 1

Need to set th to some fixed width then columns will stop resizing. Since you have 6 columns I chose width: 16.6% for each th which is 100%/6.
let tbody1 = document.getElementById('t-body-1')
let tbody2 = document.getElementById('t-body-2')
setInterval(function () {
tbody1.classList.toggle('no-display');
tbody2.classList.toggle('no-display');
}, 1000)
table {
border-collapse: collapse;
-webkit-box-shadow: #e2e2e2 0 10px 20px;
-moz-box-shadow: #e2e2e2 0 10px 20px;
box-shadow: #e2e2e2 0 10px 20px;
border-radius: 10px;
overflow: hidden;
table-layout: fixed;
width: 934px;
}
.r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th {
padding: 12px 25px;
text-align: left;
/*width: 1%;*/
overflow: hidden;
border-collapse: collapse;
}
.no-display {
display:none;
}
th {
width: 16.6%;
}
<div class="table-container" id="table-container">
<div class="r-header-controller"></div>
<table id="custom-table">
<thead class="r-thead">
<tr class="r-thead-tr">
<th class="r-thead-tr-th">Name</th>
<th class="r-thead-tr-th">Designation</th>
<th class="r-thead-tr-th">City</th>
<th class="r-thead-tr-th">Postal</th>
<th class="r-thead-tr-th">Start date</th>
<th class="r-thead-tr-th">Salary</th>
</tr>
</thead>
<tbody id="t-body-1" class="r-tbody">
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Brielle Williamson</td>
<td class="r-tbody-tr-td">Integration Specialist</td>
<td class="r-tbody-tr-td">New York</td>
<td class="r-tbody-tr-td">4804</td>
<td class="r-tbody-tr-td">2012/12/02</td>
<td class="r-tbody-tr-td">$372,000</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Herrod Chandler</td>
<td class="r-tbody-tr-td">Sales Assistant</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">9608</td>
<td class="r-tbody-tr-td">2012/08/06</td>
<td class="r-tbody-tr-td">$137,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Rhona Davidson</td>
<td class="r-tbody-tr-td">Integration Specialist</td>
<td class="r-tbody-tr-td">Tokyo</td>
<td class="r-tbody-tr-td">6200</td>
<td class="r-tbody-tr-td">2010/10/14</td>
<td class="r-tbody-tr-td">$327,900</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Colleen Hurst</td>
<td class="r-tbody-tr-td">Javascript Developer</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">2360</td>
<td class="r-tbody-tr-td">2009/09/15</td>
<td class="r-tbody-tr-td">$205,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Sonya Frost</td>
<td class="r-tbody-tr-td">Software Engineer</td>
<td class="r-tbody-tr-td">Edinburgh</td>
<td class="r-tbody-tr-td">1667</td>
<td class="r-tbody-tr-td">2008/12/13</td>
<td class="r-tbody-tr-td">$103,600</td>
</tr>
</tbody>
<tbody id="t-body-2" class="r-tbody no-display">
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Jena Gaines</td>
<td class="r-tbody-tr-td">Office Manager Office Manager</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">3814</td>
<td class="r-tbody-tr-td">2008/12/19</td>
<td class="r-tbody-tr-td">$90,560</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Quinn Flynn</td>
<td class="r-tbody-tr-td">Support Lead</td>
<td class="r-tbody-tr-td">Edinburgh</td>
<td class="r-tbody-tr-td">9497</td>
<td class="r-tbody-tr-td">2013/03/03</td>
<td class="r-tbody-tr-td">$342,000</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Charde Marshall</td>
<td class="r-tbody-tr-td">Regional Director</td>
<td class="r-tbody-tr-td">San Francisco</td>
<td class="r-tbody-tr-td">6741</td>
<td class="r-tbody-tr-td">2008/10/16</td>
<td class="r-tbody-tr-td">$470,600</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Haley Kennedy</td>
<td class="r-tbody-tr-td">Senior Marketing Designer</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">3597</td>
<td class="r-tbody-tr-td">2012/12/18</td>
<td class="r-tbody-tr-td">$313,500</td>
</tr>
<tr class="r-tbody-tr">
<td class="r-tbody-tr-td">Tatyana Fitzpatrick</td>
<td class="r-tbody-tr-td">Regional Director</td>
<td class="r-tbody-tr-td">London</td>
<td class="r-tbody-tr-td">1965</td>
<td class="r-tbody-tr-td">2010/03/17</td>
<td class="r-tbody-tr-td">$385,750</td>
</tr>
</tbody>
<tfoot class="r-tfoot">
<tr class="r-tfoot-tr">
<th class="r-tfoot-tr-th r-text-right" colspan="5" rowspan="1">Total</th>
<th class="r-tfoot-tr-th" colspan="1" rowspan="1">$2,120,754</th>
</tr>
</tfoot>
</table>
<div class="r-footer-controller">
</div>
</div>

Answer 2

I would comment but my reputation isn't high enough for that yet.
Anyways,
I would think that your answer lies in the fact that the width in the following code needs to be changed to a static number, not a percent.
.r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th {
padding: 12px 25px;
text-align: left;
/*width: 1%;*/
overflow: hidden;
border-collapse: collapse;
}
But also, you are targeting the classes .r-thead-tr-th, .r-tbody-tr-td, .r-tfoot-tr-th which are the cells themselves. It would probably be better if you targeted .r-thead.tr and .r-tbody-tr as these are the containers for your cells. I hope this fixes your issue.

Answer 3

try using html 'colspan' property