CSS table border spacing inside only

Question

I have trying to work this out for months, and Google hasn\'t helped me. I\'m trying to have spacing between and tags in a table,

Answer 1

Use negative margins and a container with positive padding.

#container {
    box-sizing: border-box; /* avoids exceeding 100% width */
    margin: 0 auto;
    max-width: 1024px;
    padding: 0 10px;    /* fits table overflow */
    width: 100%;
}

table {
    border-collapse: separate;
    border-spacing: 10px;
    margin: 0 -10px;    /* ejects outer border-spacing */
    min-width: 100%;    /* in case content is too short */
}

td {
    width: 25%;     /* keeps it even */
}

Just make sure that you have substantial content for it to stretch the table to 100% width, or else it'll be 20px too narrow.

More info: svachon.com/blog/inside-only-css-table-border-spacing/