html - How to set cellspacing in CSS on non-table elements set to display:table-cell? -
how set cellspacing in css on non-table elements set display:table-cell? http://jsfiddle.net/david_knowles/ysyzj/
<dl> <dt>definition title 1</dt> <dd>def detail 1.1</dd> </dl> <dl> <dt>definition title 2</dt> <dd>def detail 2.1</dd> <dd>def detail 2.2</dd> </dl> dl {display:table-cell; margin:1em; background-color: #eee; vertical-align: top; padding:1em;} dt {margin: 2px 0; padding:1em; font-weight: bold;} dd {margin: 2px 0; padding:1em; }
edit: curious why border-spacing
doesn't work in situation?
just using display:table-cell
on element creates invisible (and anonymous) table around it. can accomplish border-spacing
dl tags creating div container them display:table
, border-spacing:(value)
as boltclock mentioned, border-spacing style applies tables need create 1 contains table cells.
css
div { display:table; border-spacing:5px; border-collapse:separate; /* sure */ }
as seen here in modified version of fiddle: http://jsfiddle.net/nv4fh/
Comments
Post a Comment