如何在表格行上添加边框半径

Question

有谁知道如何按照我们的喜好设置 tr 样式？

我在桌子上使用了border-collapse，之后tr可以显示我给他们的1px实心边框。

但是，当我尝试-moz-border-radius 时，它不起作用。即使是简单的边距也不起作用。

Answer 1

您只能将border-radius应用于td，而不是tr或table。通过使用这些样式，我已经解决了圆角表的问题：

table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

确保提供所有供应商前缀。这是example of it in action。

Answer 2

我认为在这种情况下折叠边界是错误的做法。折叠它们基本上意味着两个相邻单元格之间的边界变得共享。这意味着在给定半径的情况下，它应该向哪个方向弯曲尚不清楚。

相反，您可以为第一个 TD 的左两个角和最后一个 TD 的两个右角指定边框半径。您可以按照 theazureshadow 的建议使用 first-child 和 last-child 选择器，但旧版本的 IE 可能不太支持这些选择器。仅定义类（例如 .first-column 和 .last-column 来实现此目的）可能更容易。

Answer 3

奖励信息：border-radius 对带有border-collapse: collapse; 和在td 上设置边框的表格没有影响。如果border-radius 设置为table、tr 或td 也没关系——它会被忽略。

http://jsfiddle.net/Exe3g/

Answer 4

根据Opera，CSS3 标准没有定义在 TD 上使用border-radius。我的经验是 Firefox 和 Chrome 支持它，但 Opera 不支持（不知道 IE）。解决方法是将 td 内容包装在 div 中，然后将 border-radius 应用于 div。

Answer 5

行之间的实际间距

这是一个旧线程，但我注意到从 OP 读取 cmets 的其他答案，原来的目标显然是在行上有 border-radius，并且行之间有间隙。目前的解决方案似乎并没有完全做到这一点。 theazureshadow 的答案是朝着正确的方向前进，但似乎还需要更多。

对于那些对此感兴趣的人，here is a fiddle that does separate the rows and applies the radius to each row.（注意：Firefox currently has a bug in displaying/clipping background-color at the border radii。）

代码如下（正如 theazureshadow 所说，为了更早的浏览器支持，需要添加 border-radius 的各种供应商前缀）。

table { 
    border-collapse: separate; 
    border-spacing: 0 10px; 
    margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
    background-color: cyan;
}
td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
}

Answer 6

我发现在最新版本的 Chrome、FF 和 IE 中，为表格、trs 和 tds 添加边框半径似乎无法 100% 工作。我所做的是，我用 div 包裹表格并将边框半径放在上面。

<div class="tableWrapper">
  <table>
    <tr><td>Content</td></tr>
  <table>
</div>

.tableWrapper {
  border-radius: 4px;
  overflow: hidden;
}

如果你的表不是width: 100%，你可以让你的包装器float: left，记得清除它。

Answer 7

tr 元素确实遵循边界半径。可以使用纯html和css，没有javascript。

JSFiddle 链接：http://jsfiddle.net/pflies/zL08hqp1/10/

tr {
    border: 0;
    display: block;
    margin: 5px;
}
.solid {
    border: 2px red solid;
    border-radius: 10px;
}
.dotted {
    border: 2px green dotted;
    border-radius: 10px;
}
.dashed {
    border: 2px blue dashed;
    border-radius: 10px;
}

td {
    padding: 5px;
}

<table>
    <tr>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
    </tr>
    <tr class='dotted'>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr class='solid'>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
    </tr>
    <tr class='dotted'>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr class='dashed'>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
    </tr>
</table>

Answer 8

这里没有尝试获得任何功劳，所有功劳归于@theazureshadow 的回复，但我个人不得不将其调整为具有一些<th> 而不是<td> 的表格，因为它是第一行的单元格。

我只是在这里发布修改后的版本，以防你们中的一些人想使用@theazureshadow 的解决方案，但像我一样，在第一个<tr> 中有一些<th>。 “reportTable”类只需要应用于表本身。：

table.reportTable {
    border-collapse: separate;
    border-spacing: 0;
}

table.reportTable td {
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable td:last-child {
    border-right: solid gray 1px;
}

table.reportTable tr:last-child td{
    border-bottom: solid gray 1px;
}

table.reportTable th{
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable th:last-child{
    border-right: solid gray 1px;
    border-top-right-radius: 10px;
}

table.reportTable th:first-child{
    border-top-left-radius: 10px;
}

table.reportTable tr:last-child td:first-child{
    border-bottom-left-radius: 10px;
}   

table.reportTable tr:last-child td:last-child{
    border-bottom-right-radius: 10px;
}

随意调整填充、半径等以满足您的需要。希望对大家有所帮助！

Answer 9

如果表格折叠，则使用 box-shadow

Answer 10

使用border-collapse:seperate；和边框间距：0；但仅对 tds 使用border-right 和border-bottom，border-top 应用于th，border-left 仅应用于tr td:nth-child(1)。

然后您可以将边框半径应用于角点 tds（使用 nth-child 查找它们）

https://jsfiddle.net/j4wm1f29/

<table>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

table {
  border-collapse: seperate;
  border-spacing: 0;
}

tr th,
tr td {
  padding: 20px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

tr th {
  border-top: 1px solid #000;
}

tr td:nth-child(1),
tr th:nth-child(1) {
  border-left: 1px solid #000;
}

/* border radius */
tr th:nth-child(1) {
  border-radius: 10px 0 0 0;
}

tr th:nth-last-child(1) {
  border-radius: 0 10px 0 0;
}

tr:nth-last-child(1) td:nth-child(1) {
  border-radius: 0 0 0 10px;
}

tr:nth-last-child(1) td:nth-last-child(1) {
  border-radius: 0 0 10px 0;
}

Answer 11

所有答案都太长了。将边框半径添加到接受边框作为属性的表格元素的最简单方法是使用溢出进行边框半径：隐藏。

border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;

Answer 12

我建议您改用 .less， 将您的 .css 文件更改为 .less 并使用以下代码：

table { 
  border-collapse: separate;
  border-spacing: 0; 
}
td {
    border: solid 1px #000;
    border-style: none solid solid none;
    padding: 10px;
}
tr td:first-child { 
  border-top-left-radius: 10px; 
  border-bottom-left-radius: 10px;
}
tr td:last-child { 
  border-top-right-radius: 10px; 
  border-bottom-right-radius: 10px;
}
tr td { 
  border-top-style: solid; 
}
tr td:first-child { 
  border-left-style: solid; 
}

tr{
  cursor: pointer;
}

tr:hover{
  td{
    background-color: red;
  }
}

Answer 13

这是一个在单行上放置带半径的边框的示例：

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

td { padding: 5px; }

.rowBorderStart {
  border: 1px solid #000;
  border-right: 0px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.rowBorderMiddle {
  border: 1px solid #000;
  border-left: 0px;
  border-right: 0px;
}

.rowBorderEnd {
  border: 1px solid #000;
  border-left: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

<table>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td class='rowBorderStart'>2.1</td><td class='rowBorderMiddle'>2.2</td><td class='rowBorderEnd'>2.3</td></tr>
    <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>

Answer 14

CSS：

tr:first-child th:first-child {
  border-top-left-radius: 70px;
  border-bottom-left-radius: 70px;
}

tr:first-child th:last-child {
  border-top-right-radius: 70px;
  border-bottom-right-radius: 70px;
}