How to Define a Minimum Width for HTML Table Cell using CSS ? Last Updated : 28 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 PropertyApplying a Class or IDUsing the min-width PropertyThe min-width property in CSS sets the minimum width of an element, ensuring it does not shrink beyond the specified value. This is useful for preventing content compression and maintaining a minimum size for responsive design. Here we will use this property by using an element selector. Syntaxtd { min-width: value; /* Replace 'value' with the desired minimum width */}Example: Implementation to set min-width by using element selector. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Table Cell min-width</title> <style> td { min-width: 100px; border: 1px solid #ddd; /* for visualization */ padding: 8px; } </style> </head> <body> <table> <h1>GeeksforGeeks</h1> <h3> Using min-width property using element selector </h3> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> </body> </html> Output: Applying a Class or IDIn this approach, we will assign a class or ID to the table cell and then define the minimum width in the CSS for that class or ID. Syntax/* Using Class */.minWidthCell { min-width: value;}/* Using ID */#minWidthCell { min-width: value; }Example: Implementation to set min-width by using class and ID HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Table Cell Min Width Example</title> <style> /* Using Class */ .minWidthCell { min-width: 100px; border: 1px solid #ddd; padding: 8px; } /* Using ID */ #minWidthCell { min-width: 350px; border: 1px solid #ddd; padding: 8px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3>Using class and ID property</h3> <table> <tr> <td class="minWidthCell">Cell 1</td> <td class="minWidthCell">Cell 2</td> <td id="minWidthCell">Cell 3</td> </tr> </table> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Create a Full-Width Table using CSS? H hemanthbhb2001 Follow Improve Article Tags : HTML CSS-Questions Similar Reads How to set the table cell widths to minimum except last column using CSS ? 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 approac 3 min read How to Create a Full-Width Table using CSS? Creating a full-width table using CSS involves setting the table's width to 100% and adjusting other relevant properties to ensure that it stretches across the entire width of its parent container. In this article, we will explain the approach to creating a full-width table using CSS. ApproachCreate 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 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 create table cell using HTML5 ? In this article, we will create cell in a table by using a combination of <tr> and <td> tag in a HTML table. Syntax: <table> <tr> <td> . . . </td> <td> . . . </td> </tr> </table> Example: html <!DOCTYPE html> <html> <head> 1 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 Like