Set the table column width constant regardless of the amount of text in its cells?
I played with it for a bit because I had trouble figuring it out.
You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (I think that's silly but whatev).
Also, it is useful to set the overflow property to hidden to prevent any extra text from coming out of the table.
You should make sure to leave all of the bordering and sizing for CSS, too.
Ok so here's what I have:
table { border: 1px solid black; table-layout: fixed; width: 200px;}
th,td { border: 1px solid black; width: 100px; overflow: hidden;}<table> <tr> <th>header 1</th> <th>header 234567895678657</th> </tr> <tr> <td>data asdfasdfasdfasdfasdf</td> <td>data 2</td> </tr></table>Force table column widths to always be fixed regardless of contents
Specify the width of the table:
table
{
table-layout: fixed;
width: 100px;
}
See jsFiddle
Table column widths ignored
Your embedded table is showing the same width for all columns not because it is an embedded table, but because its cells contain input elements that do not have a specified width. Because of this lack of specification, they are adopting the default style specifications from the web browser. To make your table cells match your specified column widths, you can add the following CSS. Depending on the context of other input elements on your webpage, you may want to use a more specific selector.
input {
width: 100%;
}
Keep the table width same and column width based on header width
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>Set the table column width 100% with table-layout fixed?
You can downsize the font or restructure your table :
examples :font-size to screenwidth via calc(10px + 0.5vw) (reset those values to your needs if used).
table { width: 100%; table-layout: fixed; font-size: calc(10px + 0.5vw);}input { max-width: 100%; box-sizing: border-box;}input:focus { position: absolute; max-width: auto; background: lightgray;}th,td { border: 1px solid; width: max-content; text-align: center;}thead td { text-align: left; vertical-align: top;}tbody { counter-reset: trs;}tbody tr { counter-increment: trs;}tbody tr td:first-child::before { content: 'N° 'counter(trs);}td.fa {display:table-cell;}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/><table> <thead> <tr> <th>N.</th> <th><b class="fa fa-wrench"></b></th> <th><b class="fa fa-certificate"></b></th> <th><b class="fa fa-user-tie"></b></th> <th>IP</th> <th><b class="fa fa-link"></b></th> <th><b class="fa fa-door-open"></b></th> <th><b class="fa fa-server"></b></th> <th><b class="fa fa-user-circle"></b></th> <th><b class="fa fa-key"></b></th> <th><b class="fa fa-dice-d20"></b></th> <th><b class="fa fa-wrench"></b></th> <th><b class="fa fa-file-alt"></b></th> <th>$dat</th> <th>$scodiceutum</th> </tr> <tr> <td></td> <td></td> <td></td> <td><input type=search placeholder="🔍"/></td> <td><input type=search placeholder="🔍"/></td> <td><input type=search placeholder="🔍"/></td> <td><input type=search placeholder="🔍"/></td> <td><input type=search placeholder="🔍"/></td> <td><input type=search placeholder="🔍"/></td> <td><input type=search placeholder="🔍"/></td> <td><input type=search placeholder="🔍"/></td> <td><input type=search placeholder="🔍"/></td> <td><input type=search placeholder="🔍"/></td> <td><input type=search placeholder="🔍"/></td> <td><input type=search placeholder="🔍"/></td> </tr> </thead> <tbody> <tr> <td class="fa"></td> <td class=" fa wrench"> <b class="fa fa-pencil-alt green"></b> <b class="fa fa-trash-alt red"></b> </td> <td class="fa certificate">cell</td> <td class="fa user-tie"> cell</td> <td class="fa IP">cell</td> <td class="fa link">cell</td> <td class="fa door-open">cell</td> <td class="fa server">cell</td> <td class="fa user-circle">cell</td> <td class="fa key">cell</td> <td class="fa dice-d20">cell</td> <td class="fa wrench">cell</td> <td class="fa file-alt">cell</td> <td class="fa data">cell</td> <td class="fa codice">cell</td> </tr> <tr> <td class="fa"></td> <td class=" fa wrench"> <b class="fa fa-pencil-alt green"></b> <b class="fa fa-trash-alt red"></b> </td> <td class="fa certificate">cell</td> <td class="fa user-tie"> cell</td> <td class="fa IP">cell</td> <td class="fa link">cell</td> <td class="fa door-open">cell</td> <td class="fa server">cell</td> <td class="fa user-circle">cell</td> <td class="fa key">cell</td> <td class="fa dice-d20">cell</td> <td class="fa wrench">cell</td> <td class="fa file-alt">cell</td> <td class="fa data">cell</td> <td class="fa codice">cell</td> </tr> <tr> <td class="fa"></td> <td class=" fa wrench"> <b class="fa fa-pencil-alt green"></b> <b class="fa fa-trash-alt red"></b> </td> <td class="fa certificate">cell</td> <td class="fa user-tie"> cell</td> <td class="fa IP">cell</td> <td class="fa link">cell</td> <td class="fa door-open">cell</td> <td class="fa server">cell</td> <td class="fa user-circle">cell</td> <td class="fa key">cell</td> <td class="fa dice-d20">cell</td> <td class="fa wrench">cell</td> <td class="fa file-alt">cell</td> <td class="fa data">cell</td> <td class="fa codice">cell</td> </tr> <tr> <td class="fa"></td> <td class=" fa wrench"> <b class="fa fa-pencil-alt green"></b> <b class="fa fa-trash-alt red"></b> </td> <td class="fa certificate">cell</td> <td class="fa user-tie"> cell</td> <td class="fa IP">cell</td> <td class="fa link">cell</td> <td class="fa door-open">cell</td> <td class="fa server">cell</td> <td class="fa user-circle">cell</td> <td class="fa key">cell</td> <td class="fa dice-d20">cell</td> <td class="fa wrench">cell</td> <td class="fa file-alt">cell</td> <td class="fa data">cell</td> <td class="fa codice">cell</td> </tr> <tr> <td class="fa"></td> <td class=" fa wrench"> <b class="fa fa-pencil-alt green"></b> <b class="fa fa-trash-alt red"></b> </td> <td class="fa certificate">cell</td> <td class="fa user-tie"> cell</td> <td class="fa IP">cell</td> <td class="fa link">cell</td> <td class="fa door-open">cell</td> <td class="fa server">cell</td> <td class="fa user-circle">cell</td> <td class="fa key">cell</td> <td class="fa dice-d20">cell</td> <td class="fa wrench">cell</td> <td class="fa file-alt">cell</td> <td class="fa data">cell</td> <td class="fa codice">cell</td> </tr> <tr> <td class="fa"></td> <td class=" fa wrench"> <b class="fa fa-pencil-alt green"></b> <b class="fa fa-trash-alt red"></b> </td> <td class="fa certificate">cell</td> <td class="fa user-tie"> cell</td> <td class="fa IP">cell</td> <td class="fa link">cell</td> <td class="fa door-open">cell</td> <td class="fa server">cell</td> <td class="fa user-circle">cell</td> <td class="fa key">cell</td> <td class="fa dice-d20">cell</td> <td class="fa wrench">cell</td> <td class="fa file-alt">cell</td> <td class="fa data">cell</td> <td class="fa codice">cell</td> </tr> <tr> <td class="fa"></td> <td class=" fa wrench"> <b class="fa fa-pencil-alt green"></b> <b class="fa fa-trash-alt red"></b> </td> <td class="fa certificate">cell</td> <td class="fa user-tie"> cell</td> <td class="fa IP">cell</td> <td class="fa link">cell</td> <td class="fa door-open">cell</td> <td class="fa server">cell</td> <td class="fa user-circle">cell</td> <td class="fa key">cell</td> <td class="fa dice-d20">cell</td> <td class="fa wrench">cell</td> <td class="fa file-alt">cell</td> <td class="fa data">cell</td> <td class="fa codice">cell</td> </tr> <tr> <td class="fa"></td> <td class=" fa wrench"> <b class="fa fa-pencil-alt green"></b> <b class="fa fa-trash-alt red"></b> </td> <td class="fa certificate">cell</td> <td class="fa user-tie"> cell</td> <td class="fa IP">cell</td> <td class="fa link">cell</td> <td class="fa door-open">cell</td> <td class="fa server">cell</td> <td class="fa user-circle">cell</td> <td class="fa key">cell</td> <td class="fa dice-d20">cell</td> <td class="fa wrench">cell</td> <td class="fa file-alt">cell</td> <td class="fa data">cell</td> <td class="fa codice">cell</td> </tr> <tr> <td class="fa"></td> <td class=" fa wrench"> <b class="fa fa-pencil-alt green"></b> <b class="fa fa-trash-alt red"></b> </td> <td class="fa certificate">cell</td> <td class="fa user-tie"> cell</td> <td class="fa IP">cell</td> <td class="fa link">cell</td> <td class="fa door-open">cell</td> <td class="fa server">cell</td> <td class="fa user-circle">cell</td> <td class="fa key">cell</td> <td class="fa dice-d20">cell</td> <td class="fa wrench">cell</td> <td class="fa file-alt">cell</td> <td class="fa data">cell</td> <td class="fa codice">cell</td> </tr> </tbody></table>Related Topics
Are Iframes Considered 'Bad Practice'
How to Deal With Page Breaks When Printing a Large HTML Table
How to Get Centered Content Using Twitter Bootstrap
Should I Use Px or Rem Value Units in My Css
How to Choose Between 'Class' and 'Id'
Why Can't ≪Fieldset≫ Be Flex Containers
How to Reformat HTML Code Using Sublime Text 2
Should I Specify Height and Width Attributes For My Imgs in Html
Equal Height Rows in a Flex Container
An Invalid Form Control With Name='' Is Not Focusable
Using HTML and Local Images Within Uiwebview
Default Select Option as Blank