CODEWITHSUNDEEP
htmlcss
kalame04
kalame04

Reputation: 75

Can not place 2 tables side-to-side

I'm fairly new to HTML so please bear with me. I'm trying to create a printable invoice in html. I'm having an issue with placing the top 2 tables side by side. Despite using inline-block, the tables are not being stacked next to each other

What am I doing wrong? Any help or suggestion would be greatly appreciated! 

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: [email protected]
    </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>

Upvotes: 0

Views: 137

Answers (3)

Mister Moody
Mister Moody

Reputation: 114

Try implementing the declaration display: grid to build your tables side-by-side. The grid value offers fully responsive 'boxes' that can be stacked as you wish. This is a simple layout~

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>

and 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;
  }
}

Check out this pen and if you like what you see learn more about using grid here.

Upvotes: 1

sabeen kanwal
sabeen kanwal

Reputation: 607

check out this hope this would work..capsule tables inside div and adjust using float property hope it would solve ur issue..

.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: [email protected]
    </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>

i used ur code and mould it little like wrapping tables inside div and add css accordingly

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106048

The easiest : You can turn those 2 tables into table-cell, so they'll stick together side by side (demo below),

else: you'll need to float them or a wrapper to hold them and some extra CSS to keep them side by side no matter what the width avalaible. (possibly inline-block along 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: [email protected]
    </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>

Upvotes: 1

Related Questions