HTML - 在嵌套表

以下放置的行是由3列創建用於兩行的嵌套表的代碼。HTML - 在嵌套表

<html> 
<body> 
<h4>Two rows and three columns:</h4> 
<table border="1" width="100%" height="400" align="top"> 
<tr> 
    <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> 
     <td>3-2</td> 
    </tr> 
    <tr> 
     <td>3-3</td> 
     <td>3-4</td> 
    </tr> 
    </table> 
</td> 
</tr> 
<tr> 
</td> 
    <td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <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" align="top"> 
    <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" align="top"> 
    <tr> 
     <td>6-1</td> 
     <td>6-2</td> 
    </tr> 
    <tr> 
     <td>6-3</td> 
     <td>6-4</td> 
    </tr> 
    </table> 
</body> 
</html>

CURRENT OUTPUT WHICH IM GETTING NOW

EXPECTED EXPECTED OUTPUT

的問題是在基臺被創建和內表具有很多的中間空間中。我的要求是，如果兩行在那裏，並且前兩行之間不應該有空格，如果在前兩行之後還有剩餘的空格。請參閱附件圖片。（第2圖像是一個經調節的一個，請忽略縮放）

我想這樣做而不改變基本表的高度。即我希望基表的高度僅爲400。 面臨的另一個問題由DoctorMick下面的解決方案，它僅適用於IE6不能在Firefox或Mozilla。

來源

2012-03-07 m4n07

首先，設置在頂行的高度（在外部表），以低數量（其將基本上只是被用作它的最低高度），即

<tr style="height: 1">

，然後設置在第二行的垂直對齊的CSS屬性（在外部表），即

<tr style="vertical-align: top">

可以刪除從副表中的ALIGN =「頂部」。

完整的示例...

<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> 
       <td>3-2</td> 
       </tr> 
       <tr> 
       <td>3-3</td> 
       <td>3-4</td> 
       </tr> 
      </table> 
     </td> 
     </tr> 
     <tr style="vertical-align: top"> 
     <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> 
       <td>6-2</td> 
       </tr> 
       <tr> 
       <td>6-3</td> 
       <td>6-4</td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
    </table> 
    </body> 
</html>

來源

2012-03-07 13:42:50 DoctorMick

謝謝我嘗試了你的建議，它的工作原理。 – m4n07 2012-03-07 14:31:21

是否可以根據行數和列數進行動態調整？ – m4n07 2012-03-07 14:35:26

面對另一個問題，它只適用於IE6不適用於Firefox或Mozilla。 – m4n07 2012-03-07 14:39:41

嘗試VALIGN = TOP樣式設置爲內部表。如果沒有幫助，則爲該行設置垂直對齊。

來源

2012-03-07 13:38:34

VALIGN = TOP不能正常工作。 – m4n07 2012-03-07 14:32:42

使用的cellpadding屬性使表如您所願。例如使用這樣

<table border="1" cellpadding="10"> 
    <tr><td></td> 
    </tr> 
</table>

來源

2012-03-07 13:41:07 Gowti

使用這個CSS：

table{border-layout:fixed;border-spacing=0} 
td{vertical-align:top;}

來源

2012-03-07 13:44:12 amd

沒有它沒有工作。謝謝！ – m4n07 2012-03-07 15:11:56

HTML - 在嵌套表

回答

相關問題