Force HTML table width by Only Having <td witdth> - html

Question

I would like to force my HTML table to have a width by only having for each column.
What I have right now is the code below. I've removed some of the other code that doesn't apply. It is not overflowing properly and the table is only being rendered at 100% width of my screen.
#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've also tried adding the width="xx" to each of the rows. I do not wish to use width="xx" under the #example_table CSS because I have a javascript code that hides some rows, and when that is done, the table examples to that same width.
I've also tried many different CSS combinations of overflow in the different classes/IDs. Any help is greatly appreciated!

Answer 1

You can use <colgroup> to precise the width of the columns.
Here is an example:
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
border-style: solid;
border-width: 1px;
}
.tg th {
padding: 10px 5px;
border-style: solid;
border-width: 1px;
}
<table class="tg" style="undefined;table-layout: fixed; width: 700px">
<colgroup>
<col style="width: 75px">
<col style="width: 50px">
<col style="width: 200px">
<col style="width: 70px">
<col style="width: 70px">
<col style="width: 70px">
<col style="width: 70px">
<col style="width: 100px">
</colgroup>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
</tr>
<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>
</table>