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:
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