CSS Table Border Spacing Inside Only

border-spacing for inside borders only

You can select the first and last td and reset their margins to 0.

td {
  margin: 0 5px;
}
td:first-of-type, td:last-of-type {
  margin: 0;
}

HTML table cell spacing - only between cells, no outer one

This will be tricky a little bit...you will need to set display:block and border-spacing:10px for spacing between cells and same negative margin:-10px to remove the outer spacing

Stack Snippet

table {  font: bold 13px Verdana;  background: black;  margin: 30px auto;  border-spacing: 0;}
table td {  padding: 30px;  background: red;  color: #fff;}
table tbody {  margin: -10px;  display: block;  border-spacing: 10px;}

<table>  <tr>    <td>1</td>    <td>2</td>  </tr>  <tr>    <td>3</td>    <td>4</td>  </tr></table>

CSS - Border only inside the table with the cell spacing

If you're trying to write CSS rules for tables on which you've defined the cellspacing attribute, a solution could be this :

table[cellspacing] {
  border-collapse: collapse;
  border-spacing: 4px;
}
table[cellspacing] td, table[cellspacing] th {
  border: 1px solid black;
}

But it would be much cleaner and more efficient to give a class to your table (<table class="withspace">). So you would more classically do

table.withspace {
  border-collapse: collapse;
  border-spacing: 4px;
}
table.withspace td, table.withspace th {
  border: 1px solid black;
}

EDIT : just in case, if what you want is simply to have some space in your cells, add a padding value in your css :

table {
  border-collapse: collapse;
  border-spacing: 4px;
}
table td, table th {
  border: 1px solid black;
  padding: 4px;
}

Setting space between table cells only

It's not possible to achieve the desired effect with border-spacing since that adds space around each cell, not only between "inner" cells.

Cell padding doesn't work because it also grows the cells on all four sides.

If you can use CSS3, then you can try

table.test td:not(:last-child) { padding: 0 10px 0 0; }

If you don't have CSS3, then you'll have to add a style to all but the last TD in each row which gives the cell a right padding (or all but the first with a left padding).

Note: There is no way to get space outside of the cell because tables swallow the margin (Cannot put margin on <td> tag with neither CSS nor cellspacing attribute)

Demo.

Why isn't border-spacing adding padding around my TABLE element?

border-collapse will prevent padding from being applied to your table element. I think you'll be fine using border-spacing: 0; and dropping border-collapse.

I'm assuming you're wrapping your table in a DIV with a background color because you want to create a band of color across the page, rather than simply adding a background color to a table alone.

You have a few options with your approach to add space before and after the table.

1. Use padding on the table.

div {  background-color: orange;}
table {  margin: 0 auto;  padding: 3rem 0;  border-spacing: 0;}

<div>  <table>    <tr>      <th>Alpha</th>      <th>Bravo</th>    </tr>    <tr>      <td>1</td>      <td>2</td>    </tr>    <tr>      <td>3</td>      <td>4</td>    </tr>  </table></div>

apply border-spacing to some cells

A CSS only solution using the original mark-up

table-cell display types do not recognize margins, so that is why setting left and right margins are not getting you the desired result.

One work around is to specify display: block on the .center element:

.container {
    display: table;
    width: 100%;
    height: 100px;
    border-spacing: 5px;
}

.all {
    display: table-cell;
    border: 1px solid #333;
}

.left {
    width: 45px;
}

.right {
    width: 45px;
}

.center {
    width: auto;
    display: block;
    margin: 0 10px 0 10px;
    border: 1px solid red;
    height: inherit;
}

Fiddle: http://jsfiddle.net/audetwebdesign/GNVfG/

The one limitation is that the parent block .container needs an explicit height so that all the .container child elements can inherit or compute the same height.

Thanks to Ilya Streltsyn for suggesting display: block which solved the margin problem.

CSS add border-spacing & border-collapse to thead

What you can do (if you want border around your thead cells) is to wrap then in a span and manipulate it using css:

table {  border: solid 1px black;}
table thead th {  padding: 20px;}
table thead th span {  border: solid 1px black;}

<table>  <thead>    <tr>      <th>        <span>Month</span>      </th>      <th>        <span>Savings</span>      </th>    </tr>  </thead>  <tbody>    <tr>      <td>January</td>      <td>$100</td>    </tr>    <tr>      <td>February</td>      <td>$80</td>    </tr>  </tbody></table>

---

Related Topics