Question

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

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

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

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

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

Answer 2

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

Answer 3

使用cellpadding属性按预期制作表格。例如像这样使用

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

Answer 4

使用此css：

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

HTML - 将行放在嵌套表中

4 个答案: