如何在桌子的每个tr上制作圆角

Question

我正在尝试制作一张桌子，其中每个tr的表都会有圆角，如下图所示。

我尝试过以下CSS代码。

@lru_cache()

但这给了我这样的结果

Answer 1

问题是表中的tr不喜欢采用样式，因此您需要在行中添加border-radius和background-color。

此外，由于您可以拥有N个表单元格，因此我们将使用:first-child和:last-child来更改每行中第一个/最后一个td的半径。

可以通过使用表本身的border-spacing属性来实现行的间距。

以下是与您的插图相匹配的示例。

table {
  width: 500px;
  margin: 20px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

td {
  padding: 5px;
  text-align: center;
  background-color: #eee;
}
td:first-child {
  border-radius: 10px 0 0 10px;
}
td:last-child {
  border-radius: 0 10px 10px 0;
}

<table cellpadding="0" cellspacing="0" border="0">
	<thead>
		<tr>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
	</tbody>
</table>

Answer 2

也许下面的代码可以帮助您：

tr td:first-child span {
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;

}

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

td span {
  border: 1px #666 solid;
  padding: 5px;
  margin-bottom: 5px;
  border-right: none;
  float: left;
  width: 100%;
}

tr td:last-child span {
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-right: 1px #666 solid;
}

<table>
    <tr><td><span>1.1</span></td><td><span>1.2</span></td><td><span>1.3</span></td></tr>
    <tr><td><span>1.1</span></td><td><span>1.2</span></td><td><span>1.3</span></td></tr>
    <tr><td><span>1.1</span></td><td><span>1.2</span></td><td><span>1.3</span></td></tr>
</table>

Answer 3

使用以下代码-

table {
      width: 100px;
      margin: 10px;
      border-collapse: separate;
      border-spacing: 0 10px;
    }
    
    td {
      padding: 5px;
      text-align: center;
      background-color: #ccc;
    }
    td:first-child {
      border-radius: 10px 0 0 10px;
    }
    td:last-child {
      border-radius: 0 10px 10px 0;
    }

<table>
    	<tbody>
    		<tr>
    			<td>Testing</td>
    			<td>Testing</td>
    			<td>Testing</td>
    			<td>Testing</td>
    		</tr>
        <tr>
    			<td>Testing</td>
    			<td>Testing</td>
    			<td>Testing</td>
    			<td>Testing</td>
    		</tr>
    	</tbody>
    </table>

Answer 4

您可以使用这种方式

---

    <table cellspacing="0">
  <tr>
    <td>1</td>
    <td>1</td>
     <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
     <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
     <td>1</td>
  </tr>
</table>

---

 table tr {
  margin-bottom:5px;
  display: table;
}
table tr td{
  border:1px solid;
  padding: 5px;
  border-right:none;
  border-left:none;
}
table tr td:first-child{
  border-radius: 5px 0 0 5px;
  border:1px solid;
  border-right:none;
}
table tr td:last-child{
  border-radius: 0 5px 5px 0;
  border:1px solid;
  border-left:none;
}
table{
  border:1px solid;
  border-radius: 5px;
  padding:5px;
}