边框半径无法应用于我的 HTML 表格答案

【问题标题】：Border radius can't be applied to my HTML table边框半径无法应用于我的 HTML 表格
【发布时间】：2020-04-08 16:38:42
【问题描述】：

我制作了一个带有列标题作为选项卡的 HTML 表格。我想将border-radius 应用于两侧的表格行。但是我不知道具体怎么申请。虽然我试过了，但它根本没有用。我在每行之间也有白色空间，也使用白色边框。我还为每一行应用了蓝色左边框。我想弯曲它的顶角和底角。并且还想在行的右侧应用圆角。

其实这是我想要达到的目标：

左侧

右侧

此外，当您放大网页时，左手的蓝色边框会相互接触。为什么？在正常情况下，它很好。

    #tbstud {
        width:700px;
		margin:50px auto;
        border-collapse:collapse;
    }
	
	.column_heading {
		background-color:#d9e5f0;
		border-left:1px solid #ffffff;
		border-radius:5px 5px 0 0;
		color:#000;
		font-weight:bold;
		height:20px;
		line-height:20px;
		padding:10px;
		text-align:center;
	}
	
    .customer_row td {
		padding:15px;
		border-left:1px solid #ffffff;
    }
	
	.customer_row {
		background-color:#f5f7f9;
		border-bottom:1px solid #e5e9ee;
		border-left:3px solid #2585fe;
		border-top:2px solid #fff;
		color:#545454;
		border-radius:5px;
	}
	
	#tbstud .customer_row:nth-child(2) {
		border-top:none;
	}

	#tbstud .customer_row:last-child {
		border-bottom:none;
	}

    <table id="tbstud">
        <tr>
            <th>Sr. No.</th>
            <th class="column_heading">Roll No.</th>
            <th class="column_heading">Name</th>
            <th class="column_heading">Class</th>
            <th class="column_heading">Address</th>
        </tr>
        <tr class="customer_row">
            <td>1</td>
            <td>101</td>
            <td>Sam</td>
            <td>MSc</td>
            <td>Delhi</td>
        </tr>
        <tr class="customer_row">
            <td>2</td>
            <td>102</td>
            <td>Amit</td>
            <td>BCA</td>
            <td>Mumbai</td>
        </tr>
        <tr class="customer_row">
            <td>3</td>
            <td>103</td>
            <td>Rahul</td>
            <td>BCA</td>
            <td>Delhi</td>
        </tr>
        <tr class="customer_row">
            <td>4</td>
            <td>104</td>
            <td>Neha</td>
            <td>BA</td>
            <td>Pune</td>
        </tr>
        <tr class="customer_row">
            <td>5</td>
            <td>105</td>
            <td>Pooja</td>
            <td>B.Tech.</td>
            <td>Chandigarh</td>
        </tr>
    </table>

【问题讨论】：

标签： html css

【解决方案1】：

.bordered {
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 1px #CCCCCC;
}
table {
    border-spacing: 0;
    width: 600px;
    margin: 30px;
}        
.bordered th:first-child {
    border-radius: 6px 0 0 0;
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
}

.bordered th:last-child {
    border-radius: 0 6px 0 0;
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
}

.bordered td:first-child, .bordered th:first-child {
    border-left: medium none;
}

.bordered th {
    background-color: #DCE9F9;
    background-image: -moz-linear-gradient(center top , #F8F8F8, #ECECEC);
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#ECECEC), color-stop(.4, #F8F8F8));
    border-top: medium none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.bordered td, .bordered th {
    border-left: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    padding: 10px;
    text-align: left;
}

<table class="bordered">
    <thead>
        <tr>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
            <th><label>Labels</label></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>
            <td><label>Value</label></td>                            
        </tr>
    </tbody>                    
</table>

请参考： Border Radius of Table is not working

【讨论】：

【解决方案2】：

.customer_row td:first-child  {
    border-left:3px solid #2585fe;
    border-radius:5px;
    display: block;
}

【讨论】：

【解决方案3】：

只需在桌子上使用border-collapse: separate;，并在每个tr (tr td:first-child {}) 的第一个td 上设置边框半径和蓝色左边框。

【讨论】：

【解决方案4】：

你可以试试这个代码..

#tbstud {
        width:700px;
    margin:50px auto;
        border-collapse:collapse;
    }
  
  .column_heading {    background-color:#d9e5f0;
    border-left:1px solid #ffffff;
    border-radius:5px 5px 0 0;
    color:#000;
    font-weight:bold;
    height:20px;
    line-height:20px;
    padding:10px;
    text-align:center;
  }
 .customer_row td {border-left:1px solid #ffffff;} 
 .customer_row td span{
    display: block;
    padding:15px;
    background-color: #f5f7f9;
  }
  
  .customer_row {
    border-bottom:1px solid #e5e9ee;
    border-top:2px solid #fff;
    color:#545454;
    border-radius:5px;
  }
  
  .customer_row td:first-child span{ border-left:3px solid #2585fe;border-radius: 4px; }
  .customer_row td:last-child span{border-radius: 4px;}
  #tbstud .customer_row:nth-child(2) {
    border-top:none;
  }

  #tbstud .customer_row:last-child {
    border-bottom:none;
  }

<table id="tbstud">
        <tr>
            <th>Sr. No.</th>
            <th class="column_heading">Roll No.</th>
            <th class="column_heading">Name</th>
            <th class="column_heading">Class</th>
            <th class="column_heading">Address</th>
        </tr>
        <tr class="customer_row">
            <td><span>1</span></td>
            <td><span>101</span></td>
            <td><span>Sam</span></td>
            <td><span>MSc</span></td>
            <td><span>Delhi</span></td>
        </tr>
        <tr class="customer_row">
            <td><span>2</span></td>
            <td><span>102</span></td>
            <td><span>Amit</span></td>
            <td><span>BCA</span></td>
            <td><span>Mumbai</span></td>
        </tr>
        <tr class="customer_row">
            <td><span>3</span></td>
            <td><span>103</span></td>
            <td><span>Rahul</span></td>
            <td><span>BCA</span></td>
            <td><span>Delhi</span></td>
        </tr>
        <tr class="customer_row">
            <td><span>4</span></td>
            <td><span>104</span></td>
            <td><span>Neha</span></td>
            <td><span>BA</span></td>
            <td><span>Pune</span></td>
        </tr>
        <tr class="customer_row">
            <td><span>5</span></td>
            <td><span>105</span></td>
            <td><span>Pooja</span></td>
            <td><span>B.Tech.</span></td>
            <td><span>Chandigarh</span></td>
        </tr>
    </table>

【讨论】：

如果不使用任何额外的标记<span>，我们不能让它工作吗？
添加reset.css后你的解决方案不起作用
但是，在添加重置 css 后为我工作。我觉得有点不对劲。