View video tutorial
CSS Tables Size
CSS
The size of a table and cells is controlled using the width and height properties
CSS Table size.
➔ Percentage (%) defines the width relative to the parent element.
table {
width: 100%; /* The table will occupy the full width of its parent container */
}
➔ Fixed lengths (px, em, etc.) define a fixed, unchanging width.
table {
width: 400px;
}
Syntax
table { width: 90%; }
th, tr { height: 30px; }
CSS table-layout property
| Value | Description |
|---|---|
| auto | The width of the column is determined by the content within the cell. This is default. |
| fixed | The width of the table and columns is based on the width set in the first row. |
table {
table-layout: fixed;
width: 100%;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Table width height Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
table {
border-collapse: collapse;
width: 100%;
font-size: 10pt;
table-layout: fixed;
}
th {
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
text-align: left;
}
td {
border: 1px solid #d5d5d5;
padding: 2px;
text-align: left;
}
tr:nth-child(even) {
background-color: #efefef;
}
tr:hover {
background-color: #ddd;
}
caption {
font-weight: bold;
margin: 10px;
}
th, tr { height: 30px; }
</style>
</head>
<body>
<h3>CSS Table width height Example</h3>
<table>
<caption>Student Information Table</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Smith</td>
<td>Male</td>
<td></td>
<td>US</td>
</tr>
<tr>
<td>Olivia</td>
<td>Jones</td>
<td>Female</td>
<td></td>
<td>US</td>
</tr>
<tr>
<td>David</td>
<td>Brown</td>
<td>Male</td>
<td></td>
<td>US</td>
</tr>
<tr>
<td>Sarah</td>
<td>Williams</td>
<td>Female</td>
<td></td>
<td>US</td>
</tr>
<tr>
<td>Michael</td>
<td>Taylor</td>
<td>Male</td>
<td></td>
<td>US</td>
</tr>
</tbody>
</table>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.