How do I get my two tables to align beside each ot

2019-09-14 16:53发布

站内问答 / HTML/CSS
1930 3 6

I can't get my two tables to align next to each other. The second blue box (of smaller boxes) keeps sitting below the first box. I've tried using "display: inline-block" and "float: left" on every single element, but nothing happens. Please help? 

#zero-data {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  text-align: center;
}

#table-12 tr {
  display: inline-block;
}

.data-1234 {
  border: 1px solid blue;
  width: 95px;
  height: 95px;
  text-align: center;
}

#table-34 tr {
  display: inline-block;
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Problem.css">
</head>

<body>

  <!-- big table -->
  <table id="zero-table">
    <tr id="zero-row">
      <td id="zero-data">0</td>
    </tr>
  </table>

  <!-- tables 1 & 2 -->
  <table id="table-12">
    <tr id="row-1">
      <td class="data-1234">1</td>
    </tr>
    <tr id="row-2">
      <td class="data-1234">2</td>
    </tr>
  </table>

  <!-- tables 3 & 4 -->
  <table id="table-34">
    <tr id="row-3">
      <td class="data-1234">3</td>
    </tr>
    <tr id="row-4">
      <td class="data-1234">4</td>
    </tr>
  </table>

</body>

</html>

3条回答
太酷不给撩
2楼-- · 2019-09-14 16:55

Like this?

.wrapper {
  background-color: red;
}

#zero-table,
#table-12,
#table-34 {
  float: left;
}

#zero-data {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  text-align: center;
}

.data-1234 {
  border: 1px solid blue;
  width: 95px;
  height: 95px;
  text-align: center;
}
<div class="wrapper">
  <table id="zero-table">
    <tr id="zero-row">
      <td id="zero-data">0</td>
    </tr>
  </table>

  <table id="table-12">
    <tr id="row-1">
      <td class="data-1234">1</td>
    </tr>
    <tr id="row-2">
      <td class="data-1234">2</td>
    </tr>
  </table>


  <table id="table-34">
    <tr id="row-3">
      <td class="data-1234">3</td>
    </tr>
    <tr id="row-4">
      <td class="data-1234">4</td>
    </tr>
  </table>
</div>

查看更多
0人赞 添加讨论(0) 举报
做个烂人
3楼-- · 2019-09-14 17:00

No need to add Float to every element. Since you want the second and third tables to appear beside the first table, you just add Float to that first table:

#zero-table { float: left; }

See JSFiddle

查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
4楼-- · 2019-09-14 17:05

Give ghost columns a try. Place it between each of the tables. 

<!-- your table -->
<!--[if (gte mso 9)|(IE)]> 
</td> 
<td width="150" align="left" valign="top"> 
<![endif]-->
<!-- your table -->

Once you place it in the tables should start aligning properly. Change the width of the TD to whatever it's supposed to be in your code. Let me know you go.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)