CSS Table Size
Set the overall width and height of a table, and size individual columns and rows through their cells.
A table is only as wide as its content unless you tell it otherwise. Setting a width on the <table> lets it fill its container, and widths on cells influence how column space is shared.
Full-width table
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th {
height: 44px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ava</td>
<td>92</td>
</tr>
</table>
</body>
</html>Sizing columns
Because cells in the same column share a width, a width on one cell effectively sets the whole column. Percentages are handy for splitting the table proportionally.
Proportional columns
<!DOCTYPE html>
<html>
<head>
<style>
th:first-child {
width: 30%;
}
th:last-child {
width: 70%;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>Ava</td>
<td>Team lead for the design group</td>
</tr>
</table>
</body>
</html>Fixed versus automatic layout
By default a table widens columns to fit their content. Switching to table-layout: fixed makes the browser honor your declared widths and size columns evenly, which also renders large tables faster.
Predictable column widths
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
table-layout: fixed;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ava</td>
<td>92</td>
</tr>
</table>
</body>
</html>Note: Heights on cells act as a minimum. If the content is taller than the height you set, the cell grows to fit it.
