无法将 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

将表格放入容器中，并使用 CSS 中的 float 属性将容器并排放置。

HTML

<div class="table1_con">
<table></table>
</div>

<div class="table2_con">
<table></table>
</div>

CSS

Body, html {width:100%;}
.table1_con {width:20%; 
             position:absolute; 
             float:left; 

.table2_con {
     width:80%; 
     position:absolute; 
     float:left;
}
.table1_con .leftTable{
    display: inline-block;
    overflow: auto;
    border: solid 1px black;
    width: 100%;
} 
.table2_con .rightTable{
    display: inline-block;
    overflow: auto;
    border: solid 1px black;
    width: 100%;
}

Answer 2

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

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

.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>

无法将 table 并排放置

Unable to put table next to each other

html

css

html-table