边界半径无法应用于我的HTML表格

Posted 2023-02-02

我制作了一个带有列标题作为选项卡的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>

答案

.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>

另一答案

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

另一答案

只需在表上使用border-collapse: separate;，并在每个tr的第一个td上设置边界半径和蓝色左边界（tr td:first-child ）。

另一答案

您可以尝试使用此代码。。

#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 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 spanborder-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>

以上是关于边界半径无法应用于我的HTML表格的主要内容，如果未能解决你的问题，请参考以下文章

html,表格与网页边界的距离,表格与表格之间的距离怎么设置?

如何使用 SASS/CSS 使 HTML 表格占满宽度

由于边框折叠属性，表格的边框半径不起作用

使 html 表格元素响应水平滚动

：之前和之后：不使用表格

AJAX 成功无法将数据填充到表格 HTML