Table layout

Browser render a table according the value of the table-layout property.

The possible values are

PropertiesValues
auto(default) First the table data is read, then the row and cell data is complete rendered using the minimum necessary space.
fixedFirst, the table rows and cells are rendered using the specified values for width and height, then the table data is rendered using the existing space.


snippet
<html>
<head>
<style>
*{border: 1px solid gray;}
table.col1{table-layout:auto;}
table.col2{table-layout:fixed;}
table td{width:50px;}
table tr{height:50px;}
</style>
</head>
<body>
<table class="col1">
<tr><td>data 1<td>data 2<td>data 3
<tr><td>data 4<td>data 5<td>data 6
</table>

<table class="col2">
<tr><td>data 1<td>data 2<td>data 3
<tr><td>data 4<td>data 5<td>data 6
</table>
</body>
</html>
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #