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 Property
The 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.
Syntax
td {
min-width: value; /* Replace 'value' with the desired minimum width */
}
Example: Implementation to set min-width by using element selector.
<!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 ID
In 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
<!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:
