To ensure that each table column takes up 25% of the table width, even if you have a small number of columns, you can set the width of each column in CSS and use the table-layout:fixed property. This approach forces the table columns to divide the available space evenly.
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Column Width Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS :
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
th, td {
width: 25%;
border: 1px solid #000;
text-align: left;
padding: 8px;
}
table-layout: fixed: Forces the table to use fixed layout algorithm, making sure the columns take up the specified width equally.width: 25%: Sets each column to occupy 25% of the table’s width.
Leave a Reply