How do I get my two tables to align beside each other?

问题

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>

回答1:

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>

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/42776633/how-do-i-get-my-two-tables-to-align-beside-each-other

标签

html

css

html-table

rows