用下面的代碼，我得到的列大小不同（特別是最後一列很小）我想讓所有三列的大小相同。謝謝。大小相同的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表列

回答

一些修正，以考慮

相關問題