CSS Cell Margin

CSS Cell Margin

Apply this to your first <td>:

padding-right:10px;

HTML example:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

Why is a div with display: table-cell; not affected by margin?

Cause

From the MDN documentation:

[The margin property] applies to all elements except elements with
table display types other than table-caption, table and inline-table

In other words, the margin property is not applicable to display:table-cell elements.

Solution

Consider using the border-spacing property instead.

Note it should be applied to a parent element with a display:table layout and border-collapse:separate.

For example:

HTML

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

CSS

.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}

See jsFiddle demo

---

Different margin horizontally and vertically

As mentioned by Diego Quirós, the border-spacing property also accepts two values to set a different margin for the horizontal and vertical axes.

For example

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */

Set cellpadding and cellspacing in CSS?

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Margin for element in div with display:table-cell moves content in other cell

Add the vertical-align: top property to the table-cells:

.container {  display: table;  border: 1px silver solid;}.container div {  display: table-cell;  padding: 10px;  vertical-align: top;}.more {  display: block;  border: 2px red solid;  margin-top: 20px;}

<div class="container">  <div>    Some jumping content here  </div>  <div>    <a href="#" class="more">More</a>  </div></div>

display: table-cell margins

Try to use Flexbox (flexbox) to separate child elements

div.table {
    display: flex;
    justify-content: space-between;
}

JSFiddle

How to add a margin to a table row tr

Table rows cannot have margin values. Can you increase the padding? That would work. Otherwise you could insert a <tr class="spacer"></tr> before and after the class="highlighted" rows.

Margin Auto Doesn't Work With Table Cell

You can add a "wrapper"/container div around everything and give it a display: table and margin: 0 auto.

Something like this:

<div id="container">
    <div id="wrapper">
        <div id="video">
        </div>
        <div id="info">
        </div>
    </div>
</div>

CSS:

#container {
  display: table;
  margin: 0 auto;
}

Check out this JSFiddle.

---

Related Topics