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>