xxxxxxxxxx
<!--Simple table with column width-->
<table>
<colgroup>
<col span="1" style="width: 15%;">
<col span="1" style="width: 70%;">
<col span="1" style="width: 15%;">
</colgroup>
<!--Put <thead> and <tr>'s here-->
<tbody>
<td>From</td>
<td>Subject</td>
<td>Date</td>
</tbody>
</table>
<!--This code ensures that the columns span one column each (span attribute)-->
<!--Width attribute can be pixel too.-->
xxxxxxxxxx
<table border="1" width="100%">
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
<thead>
<tr>
<th>Fruits</th>
<th>Vitamin A</th>
<th>Vitamin C</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>98 ui</td>
<td>8.4 mg</td>
</tr>
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
<tr>
<th>Bananas</th>
<td>76 ui</td>
<td>10.3 mg</td>
</tr>
</tbody>
</table>
xxxxxxxxxx
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>
<h2>Set the first column to 70% of the table width</h2>
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
xxxxxxxxxx
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th,
td {
border: 1px solid black;
width: 1000px;
overflow: hidden;
}
xxxxxxxxxx
<tr>
<td class="fitwidth">ID</td>
<td>Description</td>
<td class="fitwidth">Status</td>
<td>Notes</td>
</tr>
xxxxxxxxxx
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
Run code snippetHide results