Automatically make the td in table equal depend on number of td - html

Question

I have several tables. Some have 4 td in a row, some have 3 td in a row. Is there any smart way to make those td equal depend on the number of td in a row, since I don't want to write a specific css for each case.
For example, if a row have 4 td, each td's width should be 25% and 33.33% if a row have 3 td.
I'm using scss.
Edit: I'm also looking for a way that also meet this condition too: in a table, there is two rows, the first row has 2 td, the second row has 3 td and this table still meet my requirement.
For example, in this case, I want the td in the first row (which has 1 td) will have 100% width, not 25%
table {
table-layout: fixed;
width: 100%;
text-align: center;
border-collapse: collapse;
}
td, th {
border: 1px solid #dddddd;
padding: 8px;
}
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
Thank you.

Answer 1

Use Below CSS
table {
table-layout: fixed;
width: 100%;
text-align: center;
border-collapse: collapse;
}
td, th {
border: 1px solid #dddddd;
padding: 8px;
}
Check Example here:- https://codepen.io/rvtech/pen/yLyewjG

Answer 2

You just need to use a fixed table layout and set the width of the table. I have included a few examples below.
.myTable, .subTable {
width: 200px;
table-layout: fixed;
}
td {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<h1>1. table in a table(use a sub table that uses the same css)</h1>
<table class="myTable">
<tr>
<td>apple pie</td>
<td>orange tart</td>
<td>blueberry crumble</td>
</tr>
<tr>
<table class="subTable">
<tr>
<td>apple pie</td>
<td>orange chocolate</td>
</tr>
</table>
</tr>
<tr>
<table class="subTable">
<tr>
<td>meat pie</td>
<td>apple crumble</td>
<td>cranberry jam</td>
</tr>
</table>
</tr>
</table>
<hr>
<h1>2. use colspans that you will have to set via hand or javascript</h1>
<table class="myTable">
<tr>
<td>pumpkin pie</td>
<td>banana tart</td>
</tr>
<tr>
<td colspan="2">
blueberry pie
</td>
</tr>
</table>
<hr>