After receiving data, I format it into a table displayed on a webpage with three cells arranged side by side (Cell 0,0 : Cell 0,1 : Cell 0,2).
I am attempting to evenly distribute the cells within the div so that the text in the first cell is aligned left, the middle cell is aligned center, and the last cell is aligned right.
My CSS attempt was as follows:
td {
width: calc(100%/3);
}<table border=1 style="border: 1px red dashed; width: 250px;">
<tr>
<td>first</td>
<td>second with wider contents</td>
<td>third</td>
</tr>
</table>
<table border=1 style="border: 1px blue dashed; width: 250px;">
<tr>
<td>first</td>
<td>second</td>
<td>third with wider contents</td>
</tr>
</table>The current output does not meet my desired outcome. I aim to achieve alignment consistency across multiple tables on the same page.