Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我得到的结果是

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

无法将表放在一起

2 个答案: