Set table layout to fix and 100% width in HTML and CSS

Description

The following code shows how to set table layout to fix and 100% width.

Example


<!--   w w  w. j a v a  2 s  . c  om-->
<html>
<head>
<style rel='stylesheet' type='text/css'>

table {
width: 100%;
border: thin solid black;
table-layout: fixed;
}
th, tfoot td {
border: thin solid black;
text-align: center;
font-weight: bold;
}
tbody td {
font-size: 120%;
}
caption {
font-size: 90%;
text-align: right;
}
td, th, caption {
padding: 5px;
}
</style>
</head>
<body>
<table>
<caption>
Table: My favorite records.
</caption>
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>

<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tfoot>
</table>
</body>
</html>

Click to view the demo

The code above generates the following result.

Set table layout to fix and 100% width in HTML and CSS

Home »
  HTML CSS Tutorial »
    Table »
      Table Style

...
Mix Auto-layout Table with Flex Columns in ...
Mix Column percentage and pixels width sett...
Mix Fixed Table with Flex Columns in HTML a...
Set Padding for table cell in HTML and CSS
Set background color for table header in HT...
Set background for column group in HTML and...
Set border bottom for table cell in HTML an...
Set border collapse for table in HTML and C...
Set border for table cell in HTML and CSS
Set border for table header in HTML and CSS
Set border for table in HTML and CSS
Set border left for table cell in HTML and ...
Set border right for table cell in HTML and...
Set border space for table in HTML and CSS
Set border-spacing for table in HTML and CS...
Set border top for table cell in HTML and C...
Set color for table cell in HTML and CSS
Set color for table header in HTML and CSS
Set font for table in HTML and CSS
Set font size for column group in HTML and ...
Set padding for table header in HTML and CS...
Set style for right bottom cell in HTML and...
Set style for top right table cell in HTML ...
Set style per table column in HTML and CSS
Set table border collapse to separate in HT...
Set table caption to bottom in HTML and CSS
Set table-layout to auto in HTML and CSS

Set table layout to fix and 100% width in H...

Set table layout to fix and 200-pixel width...
Set table layout to fixed in HTML and CSS
Set text align for table header in HTML and...
Set text alignment for table header in HTML...
Set text shadow for table cell in HTML and ...
Set text shadow for table header in HTML an...
Set the left and bottom cell style in HTML ...
Set the table width in HTML and CSS
Set to hide empty cell for table in HTML an...
Set top left table cell style in HTML and C...
...