How to Define a Minimum Width for HTML Table Cell using CSS ?
Last Updated :
08 Feb, 2024
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.
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.
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 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
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:
Share your thoughts in the comments
Please Login to comment...