How can I set a fixed width for each column in my HTML table without using the width property in CSS?
The current code is not displaying the table properly, with it only rendering at 100% width of the screen. Here's a snippet of the relevant code:
#example_table {
border-collapse: collapse;
table-layout: fixed;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
overflow-x: scroll;
overflow-y: visible;
width: 100%;
}<div class="zui-wrapper">
<div class="zui-scroller">
<table id="example_table">
<thead>
<tr>
<th style="width: 75px;">Col1</th>
<th style="width: 50px;">Col2</th>
<th style="width: 200px;">Col3</th>
<th style="width: 70px;">Col4</th>
<th style="width: 70px;">Col5</th>
<th style="width: 70px;">Col6</th>
<th style="width: 70px;">Col7</th>
<th style="width: 100px;">Col8</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ex1</td>
<td>Ex2</td>
<td>Ex3</td>
<td>Ex4</td>
<td>Ex5</td>
<td>Ex6</td>
<td>Ex7</td>
<td>Ex8</td>
</tr>
</tbody>
</table>
</div>
</div>I have attempted to set the width manually for each row, but I do not want to use the width property under #example_table CSS as some rows are dynamically hidden through JavaScript.
Various combinations of overflow properties in CSS classes and IDs have also been tested, but I am still encountering issues. Any assistance on this matter would be highly appreciated!