Question

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

我在做什么错？任何帮助或建议，将不胜感激！

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

最简单的：您可以将这两张桌子变成table-cell，这样它们就可以并排在一起（如下所示），

其他：无论可用的宽度如何，您都需要浮动它们或包装器来固定它们以及一些额外的CSS以使其并排。（可能是inline-block的{{1}}）

white-space

.Info {
display:table-cell;
}

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;
}

Answer 2

检查此希望是否可行。.tables内的div胶囊并使用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内并相应地添加css

Answer 3

尝试实现声明display: grid来并排构建表。 grid值提供完全响应的“盒子”，可以根据需要堆叠。这是一个简单的布局〜

HTML

<section class="tableGrid">
  <div>
    <div>
      <p>Row 1 - Table 1</p>
    </div>
    <div>
      <p>Row 2 - Table 1</p>
    </div>
  </div>
  <!-- **********************  -->
  <div>
    <div>
      <p>Row 1 - Table 2</p>
    </div>
    <div>
      <p>Row 2 - Table 2</p>
    </div>
  </div>
</section>

和CSS

.tableGrid {
  margin: 4vh 8vw;
  padding: 16px;
  display: grid;
  grid-template-rows: auto; 
  grid-gap: 16px;
}
.table {
  border: 4px dotted red;
}
@media (min-width: 800px) {
  .tableGrid {
      margin: 8vh 16vw;
      padding: 32px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(auto-fit: minmax(88px 1fr);
      grid-gap: 24px;
  }
}

查看此pen，如果您喜欢自己喜欢的内容，请详细了解使用网格 here。

不能并排放置2张桌子

3 个答案: