How to remove a table's background square with CSS?

Question

Which parameters in the CSS do I need to tweak in order to remove the background table in a two column table like this

<style>




    table{
              padding: 10px;
              /*height:150px;*/
              border:1px solid black;
              border-radius:10px;
              box-shadow:0px 0px 2px #777;
              border-spacing: 75px 0px;
              padding-left: 50px;


          }
      td{
              height:20px;
              /*padding:30px;*/
              width: 50%;

          }

</style>



<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: unset;">
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum </td>
      <td>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</td>
    </tr>
    <tr>
      <td>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</td>
    </tr>
    <tr>
      <td>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
        odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</td>
    </tr>
    <tr>
      <td>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</td>
      <td> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</td>
    </tr>
  </tbody>
</table>

As you can see, in the above table there is a background square that surronds the two columns, What is the best way of getting rid of it from the brackground?

Update

I tried to play with the border parameter like this:

table{
          padding: 10px;
          /*height:150px;*/
          border:1px solid black;
          border-radius:10px;
          box-shadow:0px 0px 2px #777;
          border-spacing: 75px 0px;
          padding-left: 50px;
          border: none;
      }

However, it harms the two inner tables. How can I just remove the border of the backgroud?

Does this answer your question? [How to completely remove borders from HTML table](https://stackoverflow.com/questions/5684144/how-to-completely-remove-borders-from-html-table) — Rickard Elimää, Feb 13 '21 at 00:34
Thanks @RickardElimää certanly I tried to tweak the `border: none;` parameter, however it is damaging the inner tables. I would like to leave them as they are. Any idea of how to remove that border? — aywoki, Feb 13 '21 at 00:37

score 2 · Answer 1 · answered Feb 13 '21 at 00:39

You'd need to remove some of your definitions.

Your main problem is the border-spacing.

I modified over your code adding definitions in the end so you can spot the difference.

Check the snippet:

table {
  padding: 10px;
  /*height:150px;*/
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0px 0px 2px #777;
  border-spacing: 75px 0px;
  padding-left: 50px;
  
  /* Changed styles */
  border-spacing: 0;
  padding: 0;
}

td {
  height: 20px;
  /*padding:30px;*/
  width: 50%;
  
  /* You also need to add border-radius here */
}

thead > tr > th,
tbody > tr > td {
  padding: 7px 10px;
}

thead > tr:first-child > th:first-child {
   border-radius: 9px 0 0 0;
}

thead> tr:first-child > th:last-child {
   border-radius: 0 9px 0 0;
}

tbody > tr:last-child > td:first-child {
   border-radius: 0 0 0 9px;
}

tbody > tr:last-child > td:last-child {
   border-radius: 0 0 9px 0;
}

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: unset;">
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat
        est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum </td>
      <td>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</td>
    </tr>
    <tr>
      <td>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</td>
    </tr>
    <tr>
      <td>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
        odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</td>
    </tr>
    <tr>
      <td>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</td>
      <td> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</td>
    </tr>
  </tbody>
</table>

Thanks for the help! Although this looks good I would like to preserve the space between each column, any idea of how to split these two columns? — aywoki, Feb 13 '21 at 00:44

score 1 · Answer 2 · answered Feb 13 '21 at 00:47

<style>
    table{
              padding: 10px;
              /*height:150px;*/
              border-spacing: 75px 0px;
              padding-left: 50px;
          }
      td{
              height:20px;
              /*padding:30px;*/
              width: 50%;
              border: 1px solid black;
          }
     tr,th{
              border: 1px solid black;
              }

</style>

<table class="dataframe">
  <thead>
    <tr style="text-align: unset;">
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum </td>
      <td>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</td>
    </tr>
    <tr>
      <td>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</td>
    </tr>
    <tr>
      <td>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
        odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</td>
    </tr>
    <tr>
      <td>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</td>
      <td> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</td>
    </tr>
  </tbody>
</table>

Thanks for the help, but the border is still surrounding the two columns — aywoki, Feb 13 '21 at 00:49
@aywoki check the code again the outer border is removed as per the screenshot. — Clive Atkins, Feb 13 '21 at 00:54

Cinnabot · Accepted Answer · 2021-02-13T01:15:23.150

1

I got rid of the shadow and made the outline of the border 0px,hope this solved your issue

<style>
    table{
              padding: 10px;
              border:0px solid black;
              border-radius:10px;
              border-spacing: 75px 0px;
              padding-left: 50px;
</style>

My favorite change is the one below as it is more open (:

<style>
  

     table{
              padding: 100px;
              border:0px solid black;
              border-radius:10px;
              border-spacing: 75px 0px;
              padding-left: 50px;

</style>

Edit:
If you want to be able to modify the gap inbetween, modify "me" in this code bit:

<style>
border-spacing: "Me"px 0px;
</style>

edited Feb 13 '21 at 01:15

answered Feb 13 '21 at 00:52

Cinnabot

40
7

1

Thanks for the help, just for curiosity, in this case how do you control the gap between the two columns? how do you increase or decrease this gap? – aywoki Feb 13 '21 at 00:57
I answered your question in an edit @aywoki – Cinnabot Feb 13 '21 at 01:16

How to remove a table's background square with CSS?

3 Answers3