Full Width Table
To display full width table using CSS, set CSS width property of this table to 100%.
By default, table wraps to its contents. To set a specific width, we may use width property.
Examples
1 Set width of table to 100
In the following example, we take a table with two columns, and set its width to the full of its parent using CSS width
property.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> table { width: 100%; } table, th, td { border: 1px solid; border-collapse: collapse; } </style> </head> <body> <table> <thead> <tr> <th>Fruit</th> <th>Quantity</th> </tr> </thead> <tbody> <tr> <td>Apple</td> <td>32</td> </tr> <tr> <td>Banana</td> <td>48</td> </tr> <tr> <td>Cherry</td> <td>75</td> </tr> </tbody> </table> </body> </html>
2 Table with default width
If the width of the table is left to its default value, then the table wraps to its contents, as shown in the following.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> table, th, td { border: 1px solid; border-collapse: collapse; } </style> </head> <body> <table> <thead> <tr> <th>Fruit</th> <th>Quantity</th> </tr> </thead> <tbody> <tr> <td>Apple</td> <td>32</td> </tr> <tr> <td>Banana</td> <td>48</td> </tr> <tr> <td>Cherry</td> <td>75</td> </tr> </tbody> </table> </body> </html>
Conclusion
In this CSS Tutorial, we learned how to use CSS width
property to display full-width table, with examples.