How do you specify table padding in CSS? ( table, not cell padding )

Question

I have a table with a colored background and I need to specify the padding between the table and it\'s content, I.E. cells.
The table tag doesn\'t seem to accept a paddi

Answer 1

table {
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
    margin: 10px;
    width: calc(100% - 20px); 
}

Answer 2

table.foobar
{
   padding:30px; /* if border is not collapsed */
}

or 

table.foobar
{
   border-spacing:0;
}
table.foobar>tbody
{
   display:table;
   border-spacing:0; /* or other preferred */
   border:30px solid transparent; /* 30px is the "padding" */
}

Works in Firefox, Chrome, IE11, Edge.

Answer 3

The easiest/best supported method is to use <table cellspacing="10">

The css way: border-spacing (not supported by IE I don't think)

    <!-- works in firefox, opera, safari, chrome -->
    <style type="text/css">
    
    table.foobar {
    	border: solid black 1px;
    	border-spacing: 10px;
    }
    table.foobar td {
    	border: solid black 1px;
    }
    
    
    </style>
    
    <table class="foobar" cellpadding="0" cellspacing="0">
    <tr><td>foo</td><td>bar</td></tr>
    </table>

Edit: if you just want to pad the cell content, and not space them you can simply use

<table cellpadding="10">

OR

td {
    padding: 10px;
}

Answer 4

You can't... Maybe if you posted a picture of the desired effect there's another way to achieve it.

For example, you can wrap the entire table in a DIV and set the padding to the div.

Answer 5

CSS doesn't really allow you to do this on a table level. Generally, I specify cellspacing="3" when I want to achieve this effect. Obviously not a css solution, so take it for what it's worth.

Answer 6

There is another trick :

/* Padding on the sides of the table */
table th:first-child, .list td:first-child { padding-left: 28px; }
table th:last-child, .list td:last-child { padding-right: 28px; }

(Just saw it at my current job)