Question

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

Answer 1

您可以尝试使用此代码。

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

Answer 2

.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

Answer 3

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

Answer 4

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

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

4 个答案: