Javascript HTML-在嵌套表中放置行_Javascript_Html_Html Table

Javascript HTML-在嵌套表中放置行

javascript html

Javascript HTML-在嵌套表中放置行,javascript,html,html-table,Javascript,Html,Html Table,下面是为两行三列创建嵌套表的代码 <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">

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

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


两行三列：
1-1
1-2 
1-3
1-4
2-1
2-2 
2-3
2-4
3-1
3-2 
3-3
3-4
4-1
4-2 
4-3
4-4
5-1
5-2 
5-3
5-4
6-1
6-2 
6-3
6-4

当前

期望

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

我想在不改变基准台高度的情况下完成这项工作。i、 e.我希望基台高度仅为400。

面临另一个问题Doctomick的以下解决方案，它只在IE6上有效，在Firefox或Mozilla上无效。尝试将VALIGN=TOP样式设置为内部表格。

如果没有帮助，则设置行的垂直对齐。

尝试将VALIGN=TOP样式设置为内部表格。

如果没有帮助，则设置行的垂直对齐。

使用cellpadding属性使表格符合预期。例如，像这样使用

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

使用cellpadding属性使表格符合预期。例如，像这样使用

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

首先，将最上面一行（在外表中）的高度设置为一个较低的数字（基本上仅用作其最小高度），即

然后在第二行（在外部表格中）设置垂直对齐css属性，即

您可以从子表中删除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>


两行三列：
1-1
1-2 
1-3
1-4
2-1
2-2 
2-3
2-4
3-1
3-2 
3-3
3-4
4-1
4-2 
4-3
4-4
5-1
5-2 
5-3
5-4
6-1
6-2 
6-3
6-4

首先，将最上面一行（在外表中）的高度设置为一个较低的数字（基本上仅用作其最小高度），即

然后在第二行（在外部表格中）设置垂直对齐css属性，即

您可以从子表中删除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>


两行三列：
1-1
1-2 
1-3
1-4
2-1
2-2 
2-3
2-4
3-1
3-2 
3-3
3-4
4-1
4-2 
4-3
4-4
5-1
5-2 
5-3
5-4
6-1
6-2 
6-3
6-4

使用此css：

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

使用此css：

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

是否可以根据行数和列数进行动态调整？面对另一个问题，它只在IE6上有效，在Firefox或Mozilla上无效。您希望动态调整什么？另外，我刚刚在Firefox和Chrome中试用过，两者都很适合我……我将修改我的答案，以包含一个更大的代码段。我的意思是，我在运行时得到的行数和列数，所以我想基于此创建一个表。那会很有帮助的。谢谢，可以根据行数和列数进行动态调整吗？面对另一个问题，它只能在IE6上工作，不能在Firefox或Mozilla上工作。您希望动态调整什么？另外，我刚刚在Firefox和Chrome中试用过，两者都很适合我……我将修改我的答案，以包含一个更大的代码段。我的意思是，我在运行时得到的行数和列数，所以我想基于此创建一个表。那会很有帮助的。谢谢