All geek questions in one place

Equal Size HTML Table Column

With the code below, I get the size of the columns different (for example, the last column is small) I would like all three columns to be the 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>
+4
source share
5 answers

Insert the colgroup element into your table:

 <table> <colgroup> <col style="width: 33%" /> <col style="width: 33%" /> <col style="width: 33%" /> </colgroup> <tr> ... </tr> </table>
+16
source

Just set width="33%" for each <td> first level table

+1
source

You can try setting the width of your columns as absolute rather than relative:

 < TD WIDTH=200>

Try to find the link.

0
source

Several 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>
0
source

An alternative is to set the css width for the table to 100%, for example.

 table { width:100% }

Cells must inherit this and be the same size. Thus, you are more flexible for different number of columns.

-2
source

Source: https://habr.com/ru/post/1403334/

More articles:


All Articles