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
- Applying a Class or ID
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 >w3wiki</ 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 >w3wiki</ 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: