html - 不能并排放置 2 张 table

Question

我对 HTML 还很陌生，所以请多多包涵。我正在尝试在 html 中创建可打印的发票。我在并排放置前 2 个表时遇到问题。尽管使用了内联 block ，但表格并没有彼此相邻堆叠

我做错了什么？任何帮助或建议将不胜感激!

body {
  padding: 1%;
  padding-top: 3%;
  font-family: Arial, Arial Black;
  font-size: small;
}

.RetailerLogo {
  position: absolute;
  top: 0px;
  width: 250px;
}

.RetailerLogo img {
  width: 100%;
}

.RetailerOrderData {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: small;
}

.PageTitle {
  font-family: Arial Black, Arial;
  font-size: x-large;
  border-bottom: 5px;
}

table thead {
  font-family: Arial Black, Arial;
  background: Pink;
  color: Red;
  height: 15px;
}

table thead td {
  border-bottom: solid thin black;
}

table.Info {
  width: 50%;
  margin-bottom: 20px;
  margin-right: 2%;
  border-style: solid;
  border-width: thin;
  border-color: Red;
}

table.Info tbody td {
  font-family: Arial;
  height: 60px;
  padding-top: -3px;
}

table.Contents {
  width: 99%;
  display: block;
  text-align: center;
  border-style: solid;
  border-width: thin;
  border-color: Black;
  font-family: Arial;
  font-size: small;
}

table.Contents tbody {
  border-style: solid;
  border-width: thin;
  border-color: Black;
}

table.Contents tbody td {
  padding-top: 0px;
  margin-bottom: -5px;
}

table.Contents tbody tr {
  padding-top: 0px;
  margin-bottom: -5px;
}

<div class="RetailerLogo">
  <img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
  <div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>


<div class="RetailerOrderData">
  <span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
             *%RETAILERORDERNUMBER%*
             </span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>


<table border="0" class="Info ShippingReturn">
  <thead>
    <tr>
      <td>
        Contact Info: Company Name
      </td>
    </tr>
  </thead>
  <tr>
    <td>
      %SHIPPINGRETURNADDRESS%<br/> Email: orders@gifpop.io
    </td>
  </tr>
</table>

<table class="Info ShipTo">
  <thead>
    <tr>
      <td>
        Shipped to: %CUSTOMERNAME%
      </td>
    </tr>
  </thead>
  <tr>
    <td>
      %SHIPPINGADDRESS%
    </td>
  </tr>
</table>
<table class="Contents">
  <thead>
    <tr>
      <td width="125"><b>Image</b></td>
      <td width="75"><b>Qty</b></td>
      <td width="150"><b>Code</b></td>
      <td width="320"><b>Description</b></td>
    </tr>
  </thead>
  %SHIPMENTDETAILWITHIMAGE%
  <tr>
    <td width="125">&nbsp;</td>
    <td width="75">&nbsp;</td>
    <td width="150">&nbsp;</td>
    <td width="320">&nbsp;</td>
  </tr>
</table>
<b>
        <b>
        <b>

Answer 1

检查一下希望这会起作用..在 div 中封装 tables 并使用 float property 进行调整希望它能解决你的问题..

.floatLeft { width: 50%; float: left; }
.floatRight {width: 50%; float: right; }
.container { overflow: hidden; }

body {
  padding: 1%;
  padding-top: 3%;
  font-family: Arial, Arial Black;
  font-size: small;
}

.RetailerLogo {
  position: absolute;
  top: 0px;
  width: 250px;
}

.RetailerLogo img {
  width: 100%;
}

.RetailerOrderData {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: small;
}

.PageTitle {
  font-family: Arial Black, Arial;
  font-size: x-large;
  border-bottom: 5px;
}

table thead {
  font-family: Arial Black, Arial;
  background: Pink;
  color: Red;
  height: 15px;
}

table thead td {
  border-bottom: solid thin black;
}

table.Info {
  width: 50%;
  margin-bottom: 20px;
  margin-right: 2%;
  border-style: solid;
  border-width: thin;
  border-color: Red;
}

table.Info tbody td {
  font-family: Arial;
  height: 60px;
  padding-top: -3px;
}

table.Contents {
  width: 99%;
  display: block;
  text-align: center;
  border-style: solid;
  border-width: thin;
  border-color: Black;
  font-family: Arial;
  font-size: small;
}

table.Contents tbody {
  border-style: solid;
  border-width: thin;
  border-color: Black;
}

table.Contents tbody td {
  padding-top: 0px;
  margin-bottom: -5px;
}

table.Contents tbody tr {
  padding-top: 0px;
  margin-bottom: -5px;
}

<div class="RetailerLogo">
  <img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
  <div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>


<div class="RetailerOrderData">
  <span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
             *%RETAILERORDERNUMBER%*
             </span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>

<div class="container">
<div class="floatLeft">
<table border="0" class="Info ShippingReturn">
  <thead>
    <tr>
      <td>
        Contact Info: Company Name
      </td>
    </tr>
  </thead>
  <tr>
    <td>
      %SHIPPINGRETURNADDRESS%<br/> Email: orders@gifpop.io
    </td>
  </tr>
</table>
</div>
<div class="floatRight">
<table class="Info ShipTo">
  <thead>
    <tr>
      <td>
        Shipped to: %CUSTOMERNAME%
      </td>
    </tr>
  </thead>
  <tr>
    <td>
      %SHIPPINGADDRESS%
    </td>
  </tr>
</table></div>
</div>
<table class="Contents">
  <thead>
    <tr>
      <td width="125"><b>Image</b></td>
      <td width="75"><b>Qty</b></td>
      <td width="150"><b>Code</b></td>
      <td width="320"><b>Description</b></td>
    </tr>
  </thead>
  %SHIPMENTDETAILWITHIMAGE%
  <tr>
    <td width="125">&nbsp;</td>
    <td width="75">&nbsp;</td>
    <td width="150">&nbsp;</td>
    <td width="320">&nbsp;</td>
  </tr>
</table>
<b>
        <b>
        <b>

我使用了你的代码并将其塑造得有点像在 div 中包装 tables 并相应地添加 css