不能并排放置 2 张桌子

【问题标题】：Can not place 2 tables side-to-side不能并排放置 2 张桌子
【发布时间】：2019-03-15 20:41:48
【问题描述】：

我对 HTML 还很陌生，所以请多多包涵。我正在尝试用 html 创建可打印的发票。我在将前 2 张桌子并排放置时遇到问题。尽管使用了 inline-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>

【问题讨论】：

  • “我对 HTML 还很陌生” 你应该忘记所有关于 &lt;center&gt; 标记的事情，因为它不再存在。改用 CSS。

标签： html css


【解决方案1】：

看看这个希望这会起作用..capsule 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>

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

【讨论】：

    【解决方案2】：

    最简单的：你可以把这两张桌子变成table-cell，这样它们就可以并排在一起了（下面有demo），

    else：无论可用的宽度如何，您都需要浮动它们或一个包装器来容纳它们以及一些额外的 CSS 以使它们并排保持。 （可能是inline-block 沿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;
}
    <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>

    【讨论】：

      【解决方案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，如果你喜欢你看到的了解更多关于使用gridhere的信息。

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2017-04-04
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-03-28
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode