HTML CSS两个相同高度和宽度的2列表格

Question

我在查询MySQL数据库并使用脚本将结果放入自动生成的HTML文件中。

我有两列需要并排摆放2列和4行。

我已将我的HTML & css放在小提琴中。

http://jsfiddle.net/mika6891/7b0k049r/1/

我的HTML代码：

<!-- gene description --> 
    <div id="container"> 
    <div id="gene_A_description" >GENE - A</div> 
    <div id="gene_B_description" >GENE - B</div> 
    </div> 

<div id="container"> 
    <table id="gene_A_text" class="listitems2"> 
     <tr> 
      <td><b>test1</b></td> 
      <td><!--test1-->test1</td> 
     </tr> 
     <tr> 
      <td><b>test2</b></td> 
      <td><!--test2-->test2</td> 
     </tr> 
     <tr> 
      <td><b>test3</b></td> 
      <td><!--test3-->test3</td> 
     </tr> 
     <tr> 
      <td><b>test4</b></td> 
      <td><!--test4-->test test test test test test test test test test test test test test test test</td> 
     </tr> 
     </table> 

    <div id="container"> 
    <table id="gene_A_text" class="listitems2"> 
     <tr> 
      <td><b>test1</b></td> 
      <td><!--test1-->1</td> 
     </tr> 
     <tr> 
      <td><b>test2</b></td> 
      <td><!--test2-->+</td> 
     </tr> 
     <tr> 
      <td><b>test3</b></td> 
      <td><!--test3-->test3</td> 
     </tr> 
     <tr> 
      <td><b>test4</b></td> 
      <td><!--test4-->test test </td> 
     </tr> 
     </table> 

    <div id="container"> 
    <div id="gene_A_description" >GENE - C</div> 
    <div id="gene_B_description" >GENE - D</div> 
    </div> 

我的CSS代码

table{ 
font-family:Arial; 
border-collapse: separate; 
border-spacing: 10px; 
} 

#container{ 
width: 500px; 
margin-left: auto; 
margin-right: auto; 
} 

#gene_A_description{ 
width:200px; 
height:50px; 
background-color:#e13737; 
color:white; 
text-align:center; 
margin-top: 30px; 
float: left; 
font-family: 'Arial Black', Gadget, sans-serif; 
line-height: 50px; 
} 

#gene_B_description{ 
width:200px; 
height:50px; 
background-color:#e13737; 
color:white; 
text-align:center; 
margin-top:30px; 
float: right; 
font-family: 'Arial Black', Gadget, sans-serif; 
line-height: 50px; 
} 

table.listitems2 { 
width: 150px; 
margin-left: auto; 
margin-right: auto; 
} 

#gene_A_text{ 
float:left; 
} 

#gene_B_text{ 
float:right; 
} 

现在这些HTML会自动生成所以GENE_A_TEXT和GENE_B_TEXT表永远不会包含相同信息等也不会相同，正如可以在示例中看到的（因为test4行）。

我希望表GENE_A_TEXT和GENE_B_TEXT中的相同行具有相同的高度，具体取决于其中的信息量。所以，我的下一个GENE_C_DESCRIPTION和GENE_D_DESCRIPTION开始在同一高度，而不是像现在，他们都放在下面GENE_B_TEXT

这是应该如何看起来像

Answer 1

好了，所以我已经做了一些假设来创建此解决方案。

首先，我猜你正在设置表格的标头为width:200px;，两列的宽度为100px。 （如果需要，这可以改变）。

其次，这些表不是浮动的。这意味着，如果需要的话，您不会对其他内容产生期望的行为。 - 不能很容易地改变。

最后，您需要在第一个表格之后填入空的<td></td>。我用它作为填充来获得浮动效果。如果不采用不同的方法，这是无法改变的。

table{ 
 
    font-family:Arial; 
 
    border-collapse: separate; 
 
    border-spacing: 10px; 
 
    width: 500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
thead th:nth-of-type(odd),tfoot th:nth-of-type(odd){ 
 
    width:200px; 
 
    height:50px; 
 
    background-color:#e13737; 
 
    color:white; 
 
    text-align:center; 
 
    margin-top: 30px; 
 
    font-family: 'Arial Black', Gadget, sans-serif; 
 
    line-height: 50px; 
 
} 
 
td{width:100px;}

<table> 
 
    <colgroup> 
 
    <col><col><col><col><col> 
 
    </colgroup> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="2">GENE_A</th> 
 
     <th colspan="1"></th> 
 
     <th colspan="2">GENE_B</th> 
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 
    <tr> 
 
     <th colspan="2">GENE_C</th> 
 
     <th colspan="1"></th> 
 
     <th colspan="2">GENE_D</th> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr> 
 
     <td><b>test1</b></td> 
 
     <td><!--test1-->test1</td> 
 
     
 
     <td></td> 
 
     
 
     <td><b>test1</b></td> 
 
     <td><!--test1-->test1</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>test2</b></td> 
 
     <td><!--test2-->test2</td> 
 
     
 
     <td></td> 
 
     
 
     <td><b>test2</b></td> 
 
     <td><!--test2-->+</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>test3</b></td> 
 
     <td><!--test3-->test3</td> 
 
     
 
     <td></td> 
 
     
 
     <td><b>test3</b></td> 
 
     <td><!--test3-->test3</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>test4</b></td> 
 
     <td><!--test4-->test test test test test test test test test test test test test test test test</td> 
 
     
 
     <td></td> 
 
     
 
     <td><b>test4</b></td> 
 
     <td><!--test4-->test test </td> 
 
    </tr>   
 
    </tbody> 
 
</table>

Answer 2

的图片正确的做法是创建4个块（div），每个块包含一个标题和一个表格。然后给每个块的50％的宽度，所以你会有两个块连续，固定的高度。

另外，请注意“id”必须是唯一的。如果你想给相同的设计多一个块 - 使用“类”。

我为你做了 - 我删除了所有的ID。

#container{ 
 
    width: 500px; 
 
    margin: auto; 
 
} 
 

 
table { 
 
    font-family:Arial; 
 
    border-collapse: separate; 
 
    border-spacing: 10px; 
 
} 
 

 
.singleBlock{ 
 
    width:50%; 
 
    float: left; 
 
    height:300px; 
 
    display:inline; 
 
} 
 
.title { 
 
    width:200px; 
 
    height:50px; 
 
    background-color:#e13737; 
 
    color:white; 
 
    text-align:center; 
 
    margin-top: 30px; 
 
    font-family: 'Arial Black', Gadget, sans-serif; 
 
    line-height: 50px; 
 
    } 
 

 

 
table.listitems2 { 
 
\t width:200px; 
 
    margin: auto; 
 
    display: inline-block; 
 
}

<!-- gene description --> 
 
<div id="container"> 
 
    <div class="singleBlock"> 
 
     <div class="title">GENE - A</div> 
 
     <table class="listitems2"> 
 
      <tr> 
 
       <td><b>test1</b></td> 
 
       <td><!--test1-->test1</td> 
 
      </tr> 
 
      <tr> 
 
       <td><b>test2</b></td> 
 
       <td><!--test2-->test2</td> 
 
      </tr> 
 
      <tr> 
 
       <td><b>test3</b></td> 
 
       <td><!--test3-->test3</td> 
 
      </tr> 
 
      <tr> 
 
       <td><b>test4</b></td> 
 
       <td><!--test4-->test test test test test test test test test test test test test test</td> 
 
      </tr> 
 
      </table> 
 
    </div> 
 
    
 
    
 
    
 
    <div class="singleBlock"> 
 
      <div class="title" >GENE - B</div> 
 
      <table class="listitems2"> 
 
      <tr> 
 
       <td><b>test1</b></td> 
 
       <td><!--test1-->1</td> 
 
      </tr> 
 
      <tr> 
 
       <td><b>test2</b></td> 
 
       <td><!--test2-->+</td> 
 
      </tr> 
 
      <tr> 
 
       <td><b>test3</b></td> 
 
       <td><!--test3-->test3</td> 
 
      </tr> 
 
      <tr> 
 
       <td><b>test4</b></td> 
 
       <td><!--test4-->test test </td> 
 
      </tr> 
 
      </table>   
 
    </div> 
 
    
 
    
 
     <div class="singleBlock"> 
 
      <div class="title" >GENE - C</div> 
 
      <table class="listitems2"> 
 
      
 
      </table>   
 
    </div> 
 
    
 
    <div class="singleBlock"> 
 
      <div class="title" >GENE - D</div> 
 
      <table class="listitems2"> 
 
      
 
      </table>   
 
    </div> 
 
</div>