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