Table via a code block

Site URL: https://turbot-armadillo-ja5c.squarespace.com/

Hi folks,

site p/word is: SandraCB

I have managed to design a table via code I found on the forum to use in the 'additional info' of our product block.  This can be seen here https://www.shop.chenebleu.com/wine-shop-uk/abelard12  The issue I am having is, that in adding this code into the box it then makes the alignment of the text underneath more indented as per the image attached.  If I remove the code block from the 'additional info' section of the Abelard product the text all lines up once more, so it is definitely that code causing the issue.  This is the code:

<style type="text/css">
  .table {
  display: table;
  background-color: #796b63;
  }
  .row {
  display: table-row;
    width: 60%;
  }
  .column {
     color: #ccd6dd !important;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 15px;
  width: 10%;
  border-right: 1px white;
  }

</style>
<div class="table"style="width:100%">
  <div class="row">
     <div class="column"><p style="color:white;font-size:20px;">2012</p>
     <p style="color:white;">75cl €66.00<br>150cl €135.00<br>300cl €271.00</p><a href="<a href="https://static1.squarespace.com/static/5e70d8b08c15db0634d1a96e/t/5ebd32c409f109687c019d97/1589457622251/Abelard+2012+FR.pdf"><u>Tasting Notes</u></a></div>
       
     <div class="column"><p style="color:white;font-size:20px;">2011</p>
     <p style="color:white;">75cl €66.00<br>150cl €135.00<br>300cl €271.00</p><a href="<a href="https://static1.squarespace.com/static/5e70d8b08c15db0634d1a96e/t/5ebd32c409f109687c019d97/1589457622251/Abelard+2012+FR.pdf"><u>Tasting Notes</u></a></div>

       <div class="column"><p style="color:white;font-size:20px;">2010</p>
     <p style="color:white;">75cl n/a<br>150cl €135.00<br>300cl €271.00</p><a href="<a href="https://static1.squarespace.com/static/5e70d8b08c15db0634d1a96e/t/5ebd32c409f109687c019d97/1589457622251/Abelard+2012+FR.pdf"><u>Tasting Notes</u></a></div>

     <div class="column"><p style="color:white;font-size:20px;">2007</p>
     <p style="color:white;">75cl €66.00<br>150cl n/a<br>300cl n/a</p><a href="<a href="https://static1.squarespace.com/static/5e70d8b08c15db0634d1a96e/t/5ebd32c409f109687c019d97/1589457622251/Abelard+2012+FR.pdf"><u>Tasting Notes</u></a></div>
       
    <div class="column"><p style="color:white;font-size:20px;">2006</p>
     <p style="color:white;">75cl €66.00<br>150cl n/a<br>300cl n/a</p><a href="<a href="https://static1.squarespace.com/static/5e70d8b08c15db0634d1a96e/t/5ebd32c409f109687c019d97/1589457622251/Abelard+2012+FR.pdf"><u>Tasting Notes</u></a></div>

Any ideas?

Thank you!

Sandra
 

The lower paragraphs are not indented, they have a 17px padding in the CSS.

The table does not, so it looks like the paragraphs are pushed in.

You could either remove that padding, or reconfigure the table.

The table also has issues on mobile that might be worth fixing first, because the padding/margins may need to be changed after you do that.

@rwp Hi, thank you for your reply.  The padding in the CSS seems to only affect the padding at the top not the sides?  I was very surprised to see the mobile issue, as I had added @brandon suggested code on the post where I found the code.  Bizarrely though if I click on the CSS box it automatically lines up the table, on mobile view - as per the attached image.  Yet this never shows on my own mobile?!

@media only screen and (max-width: 860px) {
       .column {
           display: block;
           width: 100%;
           border-bottom: 1px solid white;
       }
   })

OK I have solved the issue by using this process  https://emworkshop.co/blog/2018/1/3/how-to-create-a-table-in-squarespace 

Looks great on mobile now!