Html Css Two 2-column Tables Side By Side With Same Height And Width

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

Solution 1:

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;
}
theadth:nth-of-type(odd),tfootth: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><thcolspan="2">GENE_A</th><thcolspan="1"></th><thcolspan="2">GENE_B</th></tr></thead><tfoot><tr><thcolspan="2">GENE_C</th><thcolspan="1"></th><thcolspan="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>

Solution 2:

The right way to do it is to create 4 blocks (div), every block contains a title and a table. Then give every block width of 50% so you'll have two blocks in a row, and a fixed height.

Plus, please notice that "id" must be unique. If you want to give the same design to more that one block - use "class".

I did it for you - and I deleted all the IDs.

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

<!-- gene description --><divid="container"><divclass="singleBlock"><divclass="title">GENE - A</div><tableclass="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><divclass="singleBlock"><divclass="title" >GENE - B</div><tableclass="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><divclass="singleBlock"><divclass="title" >GENE - C</div><tableclass="listitems2"></table></div><divclass="singleBlock"><divclass="title" >GENE - D</div><tableclass="listitems2"></table></div></div>