在html中显示表的问题

Question

我希望首先在中心显示2个表格，在右边显示第二个表格，如图所示。

Link to the layout image

但我不知道怎么做。请帮帮我。

Answer 1

你可以使用浮动来获得一个很好的CSS解决方案：

#container { overflow: hidden; }
#table1 { float: left; width: 60%; }
#table2 { float: right; width: 39%; }

鉴于此HTML：

<div id="container">
    <table id="table1">...</table>
    <table id="table2">...</table>
</div>

jsFiddle Demo

根据您的口味设定宽度。

需要overflow: hidden，因为否则#container会崩溃，因为在计算父亲的身高时，默认情况下float不会被考虑在内。

Answer 2

或者在div框架中......

HTML

<div id="container">
  <div id="left">
    <table>
//left table
    </table>
  </div>
  <div id="right">
   <table>
//right table
   </table>
  </div>
</div>

CSS

#container{
top:0px;
left:0px;
height:100%;
width:100%;
position:absolute;
}
#left {
top:0px;
left:0px;
height:100%;
width:60%;
position:absolute;
}
#right{
top:0px;
left:60%;
height:100%;
width:40%;
position:absolute;
}

Answer 3

<table width="100%">

<tr><td width="33%"></td></tr>
<tr><td width="33%"> First table goes here </td></tr>
<tr><td width="33%"> Second table goes here</td></tr>

</table>