Is there a way to create a table with equal column sizes that do not change based on the length of the data within the table?
https://i.sstatic.net/Gyt4P.png
In the image provided, the data under the heading "Title" seems to shift the second column to the right compared to other tables where "Title" is shorter. This default behavior is unwanted. Padding the first column does not seem to resolve this issue.
How can I achieve fixed column sizes that do not disrupt the layout of the table?
Here is an example code snippet showcasing the undesired behavior:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
I have attempted setting widths for the table and columns, as well as applying padding to the table, but these solutions have not been successful in achieving the desired outcome.