How to set the table cell widths to minimum except last column using CSS ?
Last Updated :
17 Apr, 2024
Tables are widely used for showing the data and sometimes we get into a scenario where we need some special kind of styling over the rows or the cells. We will explore one case where we must make the last column dynamic using CSS and the rest taking the required width.
These are the following approaches:
Styling using classes
In this approach, A table with five columns named Name, Age, Gender, Contact, and City. Each cell in the first four columns has a class “w-min” to set its width to a minimum value, while the cells in the last column have a class “w-last” to allow them to expand to fit the remaining width of the table.
Example: The example below shows the table cell widths to a minimum except last column using CSS classes
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Table Demo
</title>
<link href="style.css"
rel="stylesheet" />
</head>
<body>
<table border="1">
<thead>
<tr>
<th> Name </th>
<th> Age </th>
<th> Gender </th>
<th> Contact </th>
<th> City </th>
</tr>
</thead>
<tbody>
<tr>
<td class="w-min"> Pradhyumn </td>
<td class="w-min"> 25 </td>
<td class="w-min"> M </td>
<td class="w-min"> 90576xxxxx </td>
<td class="w-last"> Bangalore </td>
</tr>
<tr>
<td class="w-min"> Akash </td>
<td class="w-min"> 23 </td>
<td class="w-min"> M </td>
<td class="w-min"> 87654xxxxx </td>
<td class="w-last"> Hyderabad </td>
</tr>
<tr>
<td class="w-min"> Manasvi </td>
<td class="w-min"> 22 </td>
<td class="w-min"> F </td>
<td class="w-min"> 89765xxxxx </td>
<td class="w-last"> Delhi </td>
</tr>
</tbody>
</table>
</body>
</html>
table {
width: 60%;
border-collapse: collapse;
}
td {
text-align: center;
}
td.w-min {
white-space: nowrap;
width: 1%;
}
td.w-last {
width: auto;
}
Output:
.png)
Table
Styling using child selectors
In this approach, the “:not(:last-child)” selector is used to target all table cells except the last one. It sets their width to 1% and prevents wrapping with “white-space: nowrap”. The :last-child selector then applies “width: auto” to the last cell, allowing it to expand to fit the remaining width of the table.
Example: The example shows table cell widths to a minimum except the last column using child selectors
HTML
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<link href="style.css"
rel="stylesheet" />
</head>
<body>
<table border="1">
<thead>
<tr>
<th> Name </th>
<th> Age </th>
<th> Gender </th>
<th> Contact </th>
<th> City </th>
</tr>
</thead>
<tbody>
<tr>
<td> Pradhyumn </td>
<td> 25 </td>
<td> M </td>
<td> 90576xxxxx </td>
<td> Bangalore </td>
</tr>
<tr>
<td> Akash </td>
<td> 23 </td>
<td> M </td>
<td> 87654xxxxx </td>
<td> Hyderabad </td>
</tr>
<tr>
<td> Manasvi </td>
<td> 22 </td>
<td> F </td>
<td> 89765xxxxx </td>
<td> Delhi </td>
</tr>
</tbody>
</table>
</body>
</html>
table {
width: 60%;
border-collapse: collapse;
}
td {
text-align: center;
}
td:not(:last-child) {
white-space: nowrap;
width: 1%;
}
td:last-child {
width: auto;
}
Output:
Table
Share your thoughts in the comments
Please Login to comment...