我有一个假的桌子我使用border-spacing属性在它们之间创建一个空格.但是这也会在第一个单元格之前和之后的单元格之间创建间距.
我希望它在这两列之间创建一个空格.
HTML：
- <div class="table">
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
CSS：
- .table {
- display: table;
- width: 100%;
- border-spacing: 11px 0;
- border: 1px solid #222;
- }
- .cell {
- display: table-cell;
- width: 50%;
- height: 20px;
- border: 1px solid #999;
- background: #ccc;
- }
JSFiddle：http://jsfiddle.net/ACH2Q/
解决方法
您可以使用border-spacing属性为所有表格单元格添加间距.然后使用左边边距和右边距去除父边框的外边距.
- .container {
- max-width: 980px;
- margin: 0 auto;
- overflow: hidden;
- }
- .grid {
- margin-left: -20px; /* remove outer border spacing */
- margin-right: -20px; /* remove outer border spacing */
- }
- .row {
- display: table;
- table-layout: fixed; /* keep equal cell widths */
- width: 100%; /* need width otherwise cells aren't equal and they self collapse */
- border-spacing: 20px 0; /* best way to space cells but has outer padding */
- }
- .col {
- display: table-cell;
- vertical-align: top;
- }
唯一的缺点是需要额外的嵌套div,因为表需要宽度100％,边距权不起作用.
- <div class="container">
- <div class="grid">
- <div class="row">
- <div class="col">col</div>
- <div class="col">col</div>
- <div class="col">col</div>
- </div>
- </div>
- </div>
