Html Table Column of Equal Size
With the Below Code, I Get the Columns Size Being Different (Esp the Last Column Is Small) I Would Like to Have All the Three Columns to Be of Same Size...
With the below code, I get the columns size being different (esp the last column is small) I would like to have all the three columns to be of same size.Thanks.
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1" width="100%" height="400" align="top">
<tr style="height: 1">
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>1-3</td>
<td>1-4</td>
</tr>
</table>
</td>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>3-1</td>
</tr>
<tr>
<td>3-2</td>
</tr>
</table>
</td>
</tr>
<tr style="vertical-align: top">
</td>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
<tr>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>5-1</td>
<td>5-2</td>
</tr>
<tr>
<td>5-3</td>
<td>5-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>6-1</td>
</tr>
<tr>
<td>6-3</td>
</tr>
</table>
</body>
</html>
5 Answers
Insert a colgroup element in your table:
<table>
<colgroup>
<col style="width: 33%" />
<col style="width: 33%" />
<col style="width: 33%" />
</colgroup>
<tr>
...
</tr>
</table>
Few fixes to consider
<table style="table-layout: fixed; width: 100%;"> <!- set table layout to fixed and width to full width -->
<colgroup>
<col style="width: auto" /> <!- takes the remaining space -->
<col style="width: 33.3333%" /> <!- or use 33.3333% for all instead if you want to occupy full width -->
<col style="width: 33.3333%" />
</colgroup>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
...
</table>
Just set each <td> of the first level table to width="33%"
You could try to set your the width of your columns to be absolute, instead of relative:
< TD WIDTH=200>
Try looking at this link.
An alternative is to set the css width of the table to 100% e.g.
table { width:100% }
The cells should inherit this and be of equal size. That way you are more flexible to different numbers of columns.
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
