HTML - 在嵌套表中放置行答案

【问题标题】：HTML - placing rows in a nested tableHTML - 在嵌套表中放置行
【发布时间】：2012-11-13 17:28:05
【问题描述】：

以下是为两行三列创建嵌套表的代码。

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

当前

预期

问题是创建了基表，而内表在中间有很多空格。我的要求是，如果有两行并且前两行之间不应该有任何空格，如果在前两行之后还有剩余的空间。请参考附图。（第二张图片是缩放的，请忽略缩放）

我想在不改变基表高度的情况下做到这一点。即我希望基表高度仅为 400。 面对 DoctorMick 的以下解决方案的另一个问题，它仅适用于 IE6 不适用于 Firefox 或 Mozilla。

【问题讨论】：

标签： javascript html html-table

【解决方案1】：

首先，将顶行的高度（在外部表中）设置为一个较低的数字（基本上只是用作它的最小高度），即

<tr style="height: 1">

然后在第二行（在外部表中）设置vertical-align css属性，即

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

您可以从子表中删除 align="top"。

完整示例...

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

【讨论】：

是否可以根据行数和列数动态调整？
面临另一个问题，它仅适用于 IE6 不适用于 Firefox 或 Mozilla。
您想动态调整什么？另外，我刚刚在 Firefox 和 Chrome 中尝试过，对我来说都很好......我将修改我的答案以包含更大的代码 sn-p。
我的意思是我在运行时获得的行数和列数，所以我想基于它创建一个表。那会有很好的帮助。谢谢

【解决方案2】：

尝试将 VALIGN = TOP 样式设置为内表。如果没有帮助，请设置行的垂直对齐方式。

【讨论】：

【解决方案3】：

使用这个 css：

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

【讨论】：

【解决方案4】：

使用 cellpadding 属性来制作你所期望的表格。例如像这样使用

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

【讨论】：