这是否可以通过CSS实现?

我在努力

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

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


当前回答

您可以在表格中使用线条高度:

<table style="width: 400px; line-height:50px;">

其他回答

你可以在桌子上做一些事情:

table {
  border-collapse: separate;
  border-spacing: 0 15px;
}

table selected:因为它将选择所有表,所以如果您想选择单个表,也可以这样做

<table class="res">

</table>

对于上面的html,您可以这样做,请注意,对于特定的表,如果需要,可以使用下面的方法。

.res {
      border-collapse: separate;
      border-spacing: 0 15px;
    }

参考:https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html

您是否尝试过:

tr.classname { margin-bottom:5em; }

或者,也可以调整每个td:

td.classname { margin-bottom:5em; }

or

 td.classname { padding-bottom:5em; }

行间隙的出现可以通过在应该存在下一个间隙的单元格上使用底部边框来实现,即边框底部:纯白色5px;

下面是创建屏幕截图的代码:

<style>
table.class1 {
    text-align:center;
    border-spacing:0 0px;
    font-family:Calibri, sans-serif;
}

table.class1 tr:first-child {
    background-color:#F8F8F8; /* header row color */
}

table.class1 tr > td {
    /* firefox has a problem rounding the bottom corners if the entire row is colored */
    /* hence the color is applied to each cell */
    background-color:#BDE5F8;
}

table.class1 th {
    border:solid #A6A6A6 1px;
    border-bottom-width:0px; /* otherwise borders are doubled-up */
    border-right-width:0px;
    padding:5px;
}

table.class1 th:first-child {
    border-radius: 5px 0 0 0;
}

table.class1 th.last {
    border-right-width:1px;
    border-radius: 0 5px 0 0;
}

/* round the bottom corners */
table.class1 tr:last-child > td:first-child {
    border-radius: 0 0 0 5px;
}

table.class1 tr:last-child > td:last-child {
    border-radius: 0 0 5px 0;
}

 /* put a line at the start of each new group */
td.newgroup {
    border-top:solid #AAA 1px;
}

/* this has to match the parent element background-color */
/* increase or decrease the amount of space by changing 5px */
td.endgroup {
    border-bottom:solid white 5px;
}

</style>

<table class="class1">
<tr><th>Group</th><th>Item</th><th class="last">Row</th></tr>
<tr><td class="newgroup endgroup">G-1</td><td class="newgroup endgroup">a1</td><td class="newgroup endgroup">1</td></tr>
<tr><td class="newgroup">G-2</td><td class="newgroup">b1</td><td class="newgroup">2</td></tr>
<tr><td>G-2</td><td>b2</td><td>3</td></tr>
<tr><td class="endgroup">G-2</td><td class="endgroup">b3</td><td class="endgroup">4</td></tr>
<tr><td class="newgroup">G-3</td><td class="newgroup">c1</td><td class="newgroup">5</td></tr>
<tr><td>G-3</td><td>c2</td><td>6</td></tr>
</table>

查看边界塌陷:单独属性(默认)和边界间距属性。

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

这两个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>

要创建行间距的错觉,请将背景色应用于行,然后使用白色创建厚边框,以便创建“空间”:)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}