HTML CSS两个相同高度和宽度的2列表格 [英] HTML CSS Two 2-column tables side by side with same height and width
问题描述
我有两列两列，四列的数据每一个都需要并排放置。
我把我的html& css in fiddle。
<！ - 基因描述 - >
< 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_textclass =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
< / tr>
< / table>
< div id =container>
< table id =gene_A_textclass =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：分开;
border-spacing：10px;
}
#container {
width：500px;
margin-left：auto;
margin-right：auto;
}
#gene_A_description {
width：200px;
height：50px;
背景颜色：＃e13737;
颜色：白色;
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;
背景颜色：＃e13737;
颜色：白色;
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;
$ b现在这些html会自动生成，所以GENE_A_TEXT和GENE_B_TEXT的表将永远不会包含相同的信息，因此也不会具有相同的高度，如示例中所示（由于test4行）。
我希望表GENE_A_TEXT和GENE_B_TEXT中的相同行具有相同的高度，具体取决于其中的信息量。因此，我的下一个GENE_C_DESCRIPTION和GENE_D_DESCRIPTION从相同的高度开始，而不是像现在这样，它们被放置在GENE_B_TEXT之下
这是它应该如何看的图片像
解决方案好的，我已经做了一些假设来创建这个解决方案。
首先，我猜你在设置表格的标题为 width：200px; 两列的宽度是100px。 （如果需要，这可以改变）。
其次，这些表格不是浮动的。这意味着，如果需要的话，您不会对其他内容产生期望的行为。 - 最后，你需要空的< td>< / td> 在第一张桌子后面。我用它作为填充来获得浮动效果。如果不采用不同的方法，这是无法改变的。
table {font-family：Arial;边界崩溃：分开; border-spacing：10px;宽度：500px; margin-left：auto; margin-right：auto;} thead th：nth-type-type（odd），tfoot th：nth-of-type（odd）{width：200px;高度：50像素;背景色：＃e13737;白颜色;文本对齐：中心; margin-top：30px; font-family：'Arial Black'，Gadget，sans-serif; line-height：50px;} td {width：100px;}
<表> < 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 - > + LT; / 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 - >测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试< / td> < TD>< / TD> < TD>< b取代; TEST4< / B>< / TD> < td><！ - test4 - > test test< / td> < / TR> < / tbody>< / table>
I'm quering a MySQL database and use a script to put results into an automatically generated HTML-file.
I have two tables with 2 columns and 4 rows each that need to be put side-by-side.
I have put my html & css in fiddle.
http://jsfiddle.net/mika6891/7b0k049r/1/
My HTML code:
<!-- 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>
My CSS-code
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;
}
Now these html will be automatically generated so the table for GENE_A_TEXT and GENE_B_TEXT will never contain the same information and so will also not be of the same heigth, as can be seen in the example (because of test4 row).
I would want that the same rows in table GENE_A_TEXT and GENE_B_TEXT have the same height, depending on the amount of information that is in there. So that my next GENE_C_DESCRIPTION and GENE_D_DESCRIPTION start at the same height, and not like it is now, that they are placed below GENE_B_TEXT
This is a picture of how it should look like
解决方案 Okay so I have made a few assumptions to create this solution.
Firstly, I'm guessing that as you are setting the headers of the tables as width:200px; that the width of the two columns are 100px. (This can be changed if need be).
Secondly, these tables are not floated. This means you will not get desired behaviour with the rest of your content if that was desired. -Cannot be changed very easily.
And finally, you need the empty <td></td> 's in after the first table. I used this as a filler to get a floating effect. This cannot be changed without using a different approach.
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>
这篇关于HTML CSS两个相同高度和宽度的2列表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
