HTML CSS两个并排的2列表，高度和宽度相同

Question

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

我有两个表，每列有2列，每行4行，需要并排放置。

我把我的html＆amp; css in fiddle。

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

正确的方法是创建4个块（div），每个块包含一个标题和一个表。然后给每个块宽度50％，这样你就可以连续两个块，并且固定高度。

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

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

bar3

#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 {
	 width:200px;
    margin: auto;
    display: inline-block;
}

Answer 2

好的，所以我做了一些假设来创建这个解决方案。

首先，我猜测当你将表格的标题设置为width:200px;时，两列的宽度是100px。 （如果需要，可以更改）。

其次，这些表格没有浮动。这意味着如果需要，您将无法获得其他内容所需的行为。 - 不能轻易改变。

最后，您需要在第一个表后面显示空的<td></td>。我用它作为填充物来获得浮动效果。如果不使用不同的方法，则无法更改。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;