Display:table-cell and cell spacing

HTML & CSS
1

I used display:table-cell to make 3 divs have equal height. Now margin is not working ( wanted to put 10px of space between each div). I tried using cell-spacing:10px; but that doesn’t seem to work either. I am baffled.

essentially this is what I am working with

.t div{display:table-cell; width:auto; padding:10px; border:1px solid #000; margin:12px; border-spacing: 10px; -moz-border-radius:10px;}
.t {background:pink; display: table; width:100%}</style>

<div class=“t”>
<div> <p>content<br>dshahsdhsd</p></div>
<div> <p>content</p></div>
<div> <p>content</p></div>
</div>

2

You’re heading in the right direction, but you’re not quite there. :slight_smile:

The border-spacing property is the one you should use (margins don’t apply to internal table objects). But it only applies to tables, not to cells. You should set the border-spacing on the ancestor element that has a display value of table (or inline-table). In this case the <div class="t">.

3

Hi,
border-spacing should give you what you are wanting.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Display Table</title>

<style type="text/css">
body,p {
    margin:0;
    padding:0;
}
.t {
    display:table;
    width:100&#37;;
    border-spacing:10px;
}
.t div{
    display:table-cell;
    padding:10px;
    border:1px solid #000;
    -moz-border-radius:10px;
}
</style>

</head>
<body>

<div class="t">
    <div><p>content</p></div>
    <div><p>content</p></div>
    <div><p>content</p></div>
</div>

</body>
</html>
Edit:

Whoops, the Cuckoo snuck in while I was typing :slight_smile:

4

thank you! I should have seen that myself.

one question… which probably has no answer, but maybe one of you experts knows a trick.

is there a way to apply spacing so that it doesnt affect the EDGE cells? in other words if the cell touches the edge of the table there is no space, but there is space to that separates one cell from the next.

5

You can either put a class on the inner or outer cells manually, or you can use fancy CSS selectors such as :first-child and :last-child … but beware, these don’t work on older browsers, so will only give the right effects to people who are running modern browsers.

6

Not that I’m aware of. The border spacing applies to all borders.

You’d have to do some kludge like applying borders and margins on the cells’ contents rather than the cells themselves.