How to set the table cell widths to minimum except last column using CSS ?
Last Updated :
30 Jul, 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)
TableStyling 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
Similar Reads
How to Define a Minimum Width for HTML Table Cell using CSS ? To set a minimum width for an HTML table cell using CSS, apply the min-width property directly to the <td> element, ensuring it does not shrink below the specified size. This ensures a minimum width for the cell content, maintaining layout integrity. Table of Content Using the min-width Proper
2 min read
How to fix the width of columns in the table ? Fixing the width of columns in a table involves setting a specific width for each column to maintain consistent sizing. This can be achieved using CSS properties like width on <th> or <td> elements, or using the <colgroup> and <col> tags to control column widths.Syntax<td
3 min read
How to set the table layout algorithm using CSS ? You can set the table layout algorithm using table-layout property which is used to display the layout of the table. In this article, you learn both auto and fixed layout algorithms to form table. Syntax: table-layout: auto|fixed; Approach 1: Using auto layout algorithm. Note: In the auto-layout alg
2 min read
How to Create Equal Width Table Cell Using CSS ? Creating equal-width table cells using CSS refers to adjusting the table's layout so that all columns maintain the same width. This technique ensures a consistent and organized appearance, making the table content easier to read and visually balanced.Here we are following some common approaches:Tabl
3 min read
How to prevent text in a table cell from wrapping using CSS? Preventing text from wrapping in a table cell ensures the content stays on one line, maintaining the layout's integrity. Using the CSS property white-space: nowrap;, you can control text behavior, avoiding unwanted line breaks within table cells.Syntax:white-space: normal|nowrap|pre|pre-wrap|pre-lin
2 min read
How to specify the optimal width for the columns in CSS ? In this article, we will learn to specify the optimal width for the columns in CSS. The column-width property of CSS is used to specify the optimal width for the columns. Approach: We can specify the optimal width for the columns in CSS using the column-width property. We set a value for the column
2 min read