表中两行之间的间距？

这是否可以通过CSS实现？

我在努力

tr.classname {
  border-spacing: 5em;
}

但没有用。也许我做错了什么？

当前回答

最好的方法是使用高度属性添加＜td＞：

<td height="50" colspan="2"></td>

你可以在这里阅读更多关于colspan的信息。

在下面的示例中，我们的表是绿色的，具有高度属性的td是黄色的：

<table style=“background color:green”><tr><td><span>洛雷姆</span></td><td><span>Ipsum公司</span></td></tr><tr><td height=“50”colspan=“2”style=“background color:yellow”></td></tr><tr><td><span>坐下</span></td><td><span>阿梅特</span></td></tr></table>

2021-02-05 14:45:14

其他回答

来自Mozilla开发者网络：

border-spacing CSS属性指定相邻单元格边界之间的距离（仅适用于分隔边界模型）。这相当于表示HTML中的cellspacing属性，但可以使用可选的第二个值来设置不同的水平和垂直间距。

这最后一部分经常受到监督。例子：

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

更新

我现在明白了OP希望特定的、单独的行具有增加的间距。我添加了一个带有tbody元素的设置，它可以在不破坏语义的情况下实现这一点。然而，我不确定是否所有浏览器都支持它。我是用Chrome制作的。

下面的例子是为了展示如何让它看起来像是一个单独的表格，充满了css的甜蜜。也给了第一排更多的空间与车身设置。请随意使用！

支持通知：IE8+、Chrome、Firefox、Safari、Opera 4+

.间距表{字体系列：'Helvetica'，'Arial'，无衬线；字体大小：15px；边界塌陷：分离；表格布局：固定；宽度：80%；边框间距：0 5px；/*这是最终的解决方案*/}.间距表th{文本对齐：左侧；填充：5px 15px；}.间距表td{边框宽度：3px 0；宽度：50%；边框颜色：深红色；边框样式：实心；背景色：红色；颜色：白色；填充：5px 15px；}.间距表td:第一个子项{边框左侧宽度：3px；边界半径：5px 0 0 5px；}.space table td:最后一个子级{边框右侧宽度：3px；边界半径：0 5px 5px 0；}.间距表thead{显示：表格；表格布局：固定；宽度：100%；}.间距表tbody{显示：表格；表格布局：固定；宽度：100%；边框间距：0 10px；}<table class=“spacing table”><thead><tr>主唱</th><th>波段</th></tr></thead><tbody><tr><td>博诺牌手表</td><td>U2型</td></tr></tbody><tbody><tr><td>克里斯·马丁</td><td>酷玩</td></tr><tr><td>米克·贾格尔</td><td>滚石乐队</td></tr><tr><td>约翰·列侬</td><td>披头士乐队</td></tr></tbody></table>

2015-02-27 13:57:10

您需要在td元素上使用填充。像这样的东西应该会奏效。当然，您可以使用顶部填充而不是底部填充获得相同的结果。

在下面的CSS代码中，大于号表示填充仅应用于td元素，这些元素是带有spaceUnder类的tr元素的直接子元素。这将使使用嵌套表成为可能。（示例代码中的单元格C和D）我不太确定浏览器是否支持直接子选择器（想想IE 6），但它不应该破坏任何现代浏览器中的代码。

/*对类spaceUnder的tr元素的直接子级td元素应用填充*/tr.spaceUnder>td{衬垫底部：1毫米；}<表><tbody><tr><td>一个</td><td>B级</td></tr><tr class=“spaceUnder”><td>C类</td><td>D）</td></tr><tr><td>电子</td><td>F级</td></tr></tbody></table>

这应该有点像这样：

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

2008-12-10 17:18:55

您需要设置边界塌陷：分离；在桌子上；大多数浏览器默认样式表开始于边框折叠：折叠；，其沟道边界间隔。

此外，边框间距：取决于TD，而不是TR。

Try:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

2012-08-27 17:18:00

查看边界塌陷：单独属性（默认）和边界间距属性。

首先，您必须使用边框折叠来分隔它们，然后可以使用边框间距来定义列和行之间的间距。

这两个CSS财产实际上在每个浏览器上都得到了很好的支持，请参阅此处。

表｛边框折叠：单独；边框间距：10px 20px；｝桌子表td，表th｛border:1px实心黑色；｝<表><tr><td>部分文本-1</td><td>部分文本-1</td></tr><tr><td>部分文本-2</td><td>部分文本-2</td></tr><tr><td>部分文本-3</td><td>部分文本-3</td></tr></table>

2017-12-20 14:04:32

我意识到这是对一个旧线程的回答，可能不是所要求的解决方案，但尽管所有建议的解决方案都没有达到我所需要的效果，但这个解决方案对我有效。

我有两个表格单元格，一个带有背景色，另一个带有边框色。上述解决方案删除了边界，因此右侧的单元格看起来像漂浮在半空中。成功的解决方案是用div和相应的类替换table、tr和td：table将是div id=“table_replacer”，tr将是div class=“tr_replaceer”，td将是div class=“td_replacer“（显然也将结束标记更改为div）

为了解决我的问题，css是：

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

希望这对某人有所帮助。

2014-05-21 13:37:45

表中两行之间的间距？

推荐文章

最新文章

标签