How to set the table cell widths to minimum except last column using CSS ? Last Updated : 30 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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:Table of Content Styling using classesStyling using child selectorsStyling using classesIn 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> CSS table { width: 60%; border-collapse: collapse; } td { text-align: center; } td.w-min { white-space: nowrap; width: 1%; } td.w-last { width: auto; } Output:TableStyling using child selectorsIn 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> CSS 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 Comment More infoAdvertise with us Next Article How to set the table cell widths to minimum except last column using CSS ? I impradhyumn Follow Improve Article Tags : HTML CSS-Questions 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 How to define the number of columns a cell should span using HTML5 ? This article will show you how a column can be made to span over multiple cells. This is done using the colspan attribute when using the <td> tag. This allows the single table cell to span the width of more than one cell or column. It provides similar functionality to the “merge cell†function 1 min read How to Set Table Cell Width & Height in HTML ? In HTML, we can control the width and height of table cells using various approaches. This article discusses different methods to set the width and height of table cells in HTML. Table of Content Using inline StyleUsing width and height attributesUsing Inline StyleIn this approach, we are using the 2 min read How to set table column width constant regardless of the amount of text in its cells ? HTML tables are a great way to create tabular layouts for the web page so that the user can access the data in tabular format as it is a much more user-friendly way to present a certain type of data. In this article, we will see how we can set the column width of a table to a fixed width that does n 3 min read How to set length to set the gap between the columns in CSS ? In this article, we will learn how to set the length that will set the gap between the columns. A web page's text content can be organized into many columns using CSS, which is a strong tool for web development. Long paragraphs of text can be divided into smaller, easier-to-read sections by using co 3 min read Like