HTML Table Column Width
To specify width to a column, set the CSS width
property of column heading th
or any of the cell td
in the respective column.
Refer CSS width property tutorial to know about valid width values and examples.
By default, the content decides the width of the table. If the content is larger than the width of its parent, then the content is wrapped in more than one line.
Examples
Column Width of 200px
In the following example, we specify a width
of 200px
for the first column. We have provided the width as inline-css.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<th style="width:200px">Name</th>
<th>Quantity</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>25</td>
</tr>
<tr>
<td>Banana</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
Column Width of 10em
In the following example, we specify a width of 10em
for the first column, and a width of 7em
for the second column. We have provided the width as inline-css.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<th style="width:10em">Name</th>
<th style="width:7em">Quantity</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>25</td>
</tr>
<tr>
<td>Banana</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
Column Width via Cell (td)
Not only using th, but we can also set the column width by specifying width for any cell (td tag) in that column.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<th>Name</th>
<th>Quantity</th>
</thead>
<tbody>
<tr>
<td style="width:200px">Apple</td>
<td>25</td>
</tr>
<tr>
<td>Banana</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
Conclusion
In this HTML Tutorial, we learned how to set a specific width for column of HTML table, with examples.