用下面的代码，我得到的列大小不同（特别是最后一列很小）我想让所有三列的大小相同。谢谢。大小相同的HTML表列

<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>

来源

2012-03-25 m4n07

你尝试定义根'td'列的宽度？ – home 2012-03-25 16:02:32

'style =“height：1”'是什么意思？ – 2012-03-25 16:13:47

style =“height：1”不起作用。只有0才允许没有单位 – 2012-03-25 18:29:22

在表中插入一个colgroup元素：

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

来源

2012-03-25 16:04:07 Sirko

谢谢你的工作。 – m4n07 2012-03-25 16:40:25

所以这只适用于3列？如果我想要更多的专栏，那么该怎么做呢？ – m4n07 2012-04-20 06:01:28

@ m4n07这适用于每一列的数量。只需为每个需要的列添加一个“col”并相应地调整宽度。 – Sirko 2012-04-20 06:25:26

刚刚成立的第一级表的每个<td>到width="33%"

来源

2012-03-25 16:03:21

你可以尝试设置您的列的宽度是绝对的，而不是相对的：

< TD WIDTH=200>

试试看这link。

来源

2012-03-25 16:06:54 theJollySin

-2

另一种方法是将表格的css宽度设置为100％，例如

table { width:100% }

单元格应该继承此并且大小相同。这样，您对不同数量的列更加灵活。

来源

2015-02-12 13:58:12 Zemogle

一些修正，以考虑

<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>

来源

2016-12-08 10:13:17 DevWL

大小相同的HTML表列

回答

一些修正，以考虑

相关问题