If you don't know how many columns you are going to have, the declaration
table-layout: fixed
along with not setting any column widths, would imply that browsers divide the total width evenly - no matter what.
That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.
ALL YOU HAVE TO DO:
HTML:
<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>
CSS:
#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/
if you have th
you need to set it too like this:
#my-table th{width:2000px;}
table {
width: 100%;
th, td {
width: 1%;
}
}
SCSS syntax
Just add style="table-layout: fixed ; width: 100%;"
inside <table>
tag and also if you do not specify any styles and add just style=" width: 100%;"
inside <table>
You will be able to resolve it.
Source: Stackoverflow.com