用CSS限制表格行和间距？

我有一张桌子，我需要在给定的行或行之间放置一个边框，并在它们之间留有间距。用CSS限制表格行和间距？

我似乎可以做一个或另一个。

我知道我可以使用

table { border-collapse: separate; border-spacing: 1em 0.5em; }

为了让我的间距，但随后的边界不会显示一些东西像

tr.bordered { border: 1px solid blue; }

如果我设置border-collapse: collapse，蓝色的边框显示。但是没有间距。

我在这里错过了什么吗？

编辑：JS FIDDLE here

你可以看到，如果你用“崩溃”，边境的作品，但没有空间。

如果您使用“分开”，您会得到间距但没有边框。

来源

2014-04-18 Steve

可能是有帮助的像这样的财产以后一个的jsfiddle。 –

或者添加你想要的结果图。我不清楚你是否想要出现边界和间距。 – Mathias

增加了一个小提琴。我需要行和列之间的间距，但我还需要指定的行才能有边框。 – Steve

我想你想要的是在单元格边界和它的数据之间放置空格吗？如果是这样，你可以在td中使用属性填充。例如：

td { 
padding-left: 10px; 
padding-right: 10px; 
padding-bottom: 10px; 
padding-top: 10px; 
}

来源

2014-04-18 19:43:44

你可以尝试绘制unblured阴影：DEMO

.bordered { 
    box-shadow:0 0 0 1px black; 
}

:(这部作品在FF，但...

如此，我们可以使用:first-child和:last-child从td个S，

DEMO 2

.bordered td { 
    border: 1px solid #000; 
    border-left:none; 
    border:right:none; 
    padding:1em 0.5em; 
    border-right:none; 
} 
.bordered td:first-child { 
    border-left:1px solid #000 
} 
.bordered td:last-child { 
    border-right:1px solid #000; 
    border-left:none; 
} 
table { 
    border-spacing: 0; 
}

来源

2014-04-18 19:44:29

重复的问题在这里：Style row or column rather than cells when border-collapse: separate

的建议是使用colspan设为模拟表行，并添加边框表在colspan里面。

来源

2014-04-18 19:47:45 Seanna

colspan似乎总是过度杀伤。你可以做到这一点没有额外的colspans或其他。 http://jsfiddle.net/6rLsL/1/ – JohanVdR

，它可以用于背景颜色，我可能会使用它，但不是边框。看到http://jsfiddle.net/6rLsL/2/ – Steve

@seanna是的我想到了一个嵌套的表，但我会有很多行，然后它变得棘手让所有的列对齐。首先使用表格的想法是我可以对齐表格数据。 – Steve

你可以拥有它接壤的内表：

<table> 
    <tr><td colspan="3"> 

    <table class="bordered"> 
     <tr> 
      <td>foo</td> 
      <td>bar</td> 
      <td>baz</td> 
     </tr> 
    </table> 

    </td></tr> 
    <tr> 
     <td>lorem</td> 
     <td>ipsum</td> 
     <td>dolor</td> 
    </tr> 
</table>

演示：http://jsfiddle.net/2nMcg/7/

来源

2014-04-18 19:49:18

如果你想在表行之间的间距，并添加边框风格，每一行，你可以做到这一点通过设置只有顶部和底部边框间距，否则您不能为每个表格行有一个连续的线。你需要在td上设置边框样式。由于border-collapse：collapse可防止在TR元素上设置边框的样式，但您需要它来设置行之间的顶部和底部间距。
http://jsfiddle.net/6rLsL/1/
http://jsfiddle.net/6rLsL/1/show

table { 
    border-collapse: separate; 
    border-spacing: 0 0.5em; 
} 

td { 
    padding: 0.5em; 
    border-top: 1px solid #000; 
}

来源

2014-04-18 19:57:42 JohanVdR

用CSS限制表格行和间距？

回答

相关问题