html - 无法将 table 并排放置

Question

我已经阅读了其他帖子，但似乎使用 display:inline-block 和 float:left 并不能解决我的问题。这是我拥有的:

.leftTable {
  display: inline-block;
  overflow: auto;
  border: solid 1px black;
  width: 20%;
}
.rightTable {
  display: inline-block;
  overflow: auto;
  border: solid 1px black;
  width: 80%;
}

<table class="leftTable">
  <tr>
    <td>
      <form action="TestMartController" method="post">
        <input type="hidden" name="action" value="dairy">
        <input type="image" src="<%=request.getContextPath()%>/css/categories/dairy.jpg">
      </form>
    </td>
  </tr>
  <tr>
    <td>
      <form action="TestMartController" method="post">
        <input type="hidden" name="action" value="meat">
        <input type="image" src="<%=request.getContextPath()%>/css/categories/meats.jpg">
      </form>
    </td>
  </tr>
  <tr>
    <td>
      <form action="TestMartController" method="post">
        <input type="hidden" name="action" value="bakery">
        <input type="image" src="<%=request.getContextPath()%>/css/categories/bakery.jpg">
      </form>
    </td>
  </tr>
  <tr>
    <td>
      <form action="TestMartController" method="post">
        <input type="hidden" name="action" value="fruitveg">
        <input type="image" src="<%=request.getContextPath()%>/css/categories/fruit &amp; veg.jpg">
      </form>
    </td>
  </tr>
</table>

<table class="rightTable">
  <tr>
    <th>img</th>
    <th>product name</th>
    <th>price</th>
    <th>button</th>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

我得到的结果是

[leftTable]
[IMG]
[IMG]
[IMG]
[IMG]
[rightTable]
[IMG] [Product Name] [Price] [Button]

我想要的结果

[leftTable]               [rightTable]
[IMG]          [IMG] [Product Name] [Price] [Button]                                         
[IMG]
[IMG]
[IMG]

我似乎无法发现错误，有人对如何解决这个问题有建议吗？

Answer 1

一个简单的方法可能是在您的两个表上使用 display: inline-table，因为您希望它们表现得像内联元素。

float 也可以，但这取决于布局中的其他因素。

.leftTable {
  border: 1px dotted blue;
  display: inline-table;
  vertical-align: top;
}
.rightTable {
  border: 1px dotted blue;
  display: inline-table;
  vertical-align: top;
}

<table class="leftTable">
  <tr>
    <td>
      <form action="TestMartController" method="post">
        <input type="hidden" name="action" value="dairy">
        <input type="image" src="http://placehold.it/101x50">
      </form>
    </td>
  </tr>
  <tr>
    <td>
      <form action="TestMartController" method="post">
        <input type="hidden" name="action" value="meat">
        <input type="image" src="http://placehold.it/102x50">
      </form>
    </td>
  </tr>
  <tr>
    <td>
      <form action="TestMartController" method="post">
        <input type="hidden" name="action" value="bakery">
        <input type="image" src="http://placehold.it/103x50">
      </form>
    </td>
  </tr>
  <tr>
    <td>
      <form action="TestMartController" method="post">
        <input type="hidden" name="action" value="fruitveg">
        <input type="image" src="http://placehold.it/104x50">
      </form>
    </td>
  </tr>
</table>

<table class="rightTable">
  <tr>
    <th>img</th>
    <th>product name</th>
    <th>price</th>
    <th>button</th>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>