HTML: How to increase width of table columns when the table is inside a
div with fixed width
The following piece of HTML code creates a table inside a div of fixed
width. It seems that the "th,td" width is inherited from the parent div
(but the W3 documentation says that it is not a inherited property!).
How do I increase the width of table columns (say 500px)?
You can see that changing the width value in "th, td" selector does not
have any impact on width.
Please note:
- I do not want to change the width of div
- I do not want to set a fixed width to my table
- I have tried "table-layout: fixed;" inside table selector. It did not
make the "td,th" width property work.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse:collapse;
}
table, td, th {
border:1px solid black;
}
th, td {
/* Changing width doesn't make any difference */
width:500px;
}
.myclass {
width:200px;
overflow:auto
}
</style>
</head>
<body>
<div class="myclass">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
<th>Expenditure</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
<td>$50</td>
</tr>
</table>
</div>
</body>
</html>