边界半径不适用于我的特定 table html
border radius not working on my specific table html
我遇到了一个问题，我的特定 html table 上没有显示 Border-radius，我在为整个 table 添加圆角时遇到了问题，所以边缘table 中的 30 像素四舍五入。就像下面的例子：
我尝试了其他已回答的问题，但这些答案对我的 html 不起作用，我做错了什么？
tbody tr:nth-child(even) {
background-color: #191919;
}
tbody th {
text-align: left;
}
tbody tr:nth-child(odd) {
background-color: #2B2B2B;
color:white;
}
caption {
font-weight: bold;
font-size: 24px;
text-align: left;
color: #333;
margin-bottom: 16px;
}
table {
border-collapse: collapse;
text-align: left;
vertical-align: middle;
border-radius:30px;
}
th, td {
padding: 8px;
}
thead th {
width: 25%;
}
.headtable{
flex: 1 1 auto;
overflow: hidden;
}
.shouldertable{
display: flex;
align-items: baseline;
overflow: hidden;
}
.kneetable{
flex-shrink: 1;
display: inline-flex;
overflow: hidden;
font-family: 'latobold', Arial, sans-serif;
}
.toestable{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-basis: 0;
box-flex: 1;
flex-grow: 1;
flex-shrink: 1;
text-align: left;
color: #5f6368;
empty-cells: show;
}
.nosetable{
white-space: nowrap;
float: left;
text-align: left;
}
.nosetablesendero{
white-space: nowrap;
color: #d9d9d9;
float: left;
text-align: left;
margin-top: 10px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 22px;
font-family: 'latolight', Arial, sans-serif;
}
.sender{
max-width: 100px;
padding-right: 32px;
width: 21%;
max-width: 106px;
padding-right: 32px;
width: 29%;
}
.tablenotifications{
width: 100%;
}
.notifications{
}
.sentcolo{
max-width: 0;
min-width: 0;
}
.border {
padding: 10px;
border-color: red;
border: 1px solid green;
border-radius: 20px;
background-color: silver;
}
<div class="notifications">
<table class="tablenotifications">
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
</table>
</div>
添加溢出隐藏到table。
tbody tr:nth-child(even) {
background-color: #191919;
}
tbody th {
text-align: left;
}
tbody tr:nth-child(odd) {
background-color: #2B2B2B;
color:white;
}
caption {
font-weight: bold;
font-size: 24px;
text-align: left;
color: #333;
margin-bottom: 16px;
}
table {
border-collapse: collapse;
text-align: left;
vertical-align: middle;
border-radius:30px;
}
th, td {
padding: 8px;
}
thead th {
width: 25%;
}
.headtable{
flex: 1 1 auto;
overflow: hidden;
}
.shouldertable{
display: flex;
align-items: baseline;
overflow: hidden;
}
.kneetable{
flex-shrink: 1;
display: inline-flex;
overflow: hidden;
font-family: 'latobold', Arial, sans-serif;
}
.toestable{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-basis: 0;
box-flex: 1;
flex-grow: 1;
flex-shrink: 1;
text-align: left;
color: #5f6368;
empty-cells: show;
}
.nosetable{
white-space: nowrap;
float: left;
text-align: left;
}
.nosetablesendero{
white-space: nowrap;
color: #d9d9d9;
float: left;
text-align: left;
margin-top: 10px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 22px;
font-family: 'latolight', Arial, sans-serif;
}
.sender{
max-width: 100px;
padding-right: 32px;
width: 21%;
max-width: 106px;
padding-right: 32px;
width: 29%;
}
.tablenotifications{
width: 100%;
}
.notifications{
border-radius: 20px;
overflow: hidden;
}
.sentcolo{
max-width: 0;
min-width: 0;
}
.border {
padding: 10px;
border-color: red;
border: 1px solid green;
border-radius: 20px;
background-color: silver;
}
<div class="notifications">
<table class="tablenotifications">
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
</table>
</div>
我遇到了一个问题，我的特定 html table 上没有显示 Border-radius，我在为整个 table 添加圆角时遇到了问题，所以边缘table 中的 30 像素四舍五入。就像下面的例子：
tbody tr:nth-child(even) {
background-color: #191919;
}
tbody th {
text-align: left;
}
tbody tr:nth-child(odd) {
background-color: #2B2B2B;
color:white;
}
caption {
font-weight: bold;
font-size: 24px;
text-align: left;
color: #333;
margin-bottom: 16px;
}
table {
border-collapse: collapse;
text-align: left;
vertical-align: middle;
border-radius:30px;
}
th, td {
padding: 8px;
}
thead th {
width: 25%;
}
.headtable{
flex: 1 1 auto;
overflow: hidden;
}
.shouldertable{
display: flex;
align-items: baseline;
overflow: hidden;
}
.kneetable{
flex-shrink: 1;
display: inline-flex;
overflow: hidden;
font-family: 'latobold', Arial, sans-serif;
}
.toestable{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-basis: 0;
box-flex: 1;
flex-grow: 1;
flex-shrink: 1;
text-align: left;
color: #5f6368;
empty-cells: show;
}
.nosetable{
white-space: nowrap;
float: left;
text-align: left;
}
.nosetablesendero{
white-space: nowrap;
color: #d9d9d9;
float: left;
text-align: left;
margin-top: 10px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 22px;
font-family: 'latolight', Arial, sans-serif;
}
.sender{
max-width: 100px;
padding-right: 32px;
width: 21%;
max-width: 106px;
padding-right: 32px;
width: 29%;
}
.tablenotifications{
width: 100%;
}
.notifications{
}
.sentcolo{
max-width: 0;
min-width: 0;
}
.border {
padding: 10px;
border-color: red;
border: 1px solid green;
border-radius: 20px;
background-color: silver;
}
<div class="notifications">
<table class="tablenotifications">
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
</table>
</div>
添加溢出隐藏到table。
tbody tr:nth-child(even) {
background-color: #191919;
}
tbody th {
text-align: left;
}
tbody tr:nth-child(odd) {
background-color: #2B2B2B;
color:white;
}
caption {
font-weight: bold;
font-size: 24px;
text-align: left;
color: #333;
margin-bottom: 16px;
}
table {
border-collapse: collapse;
text-align: left;
vertical-align: middle;
border-radius:30px;
}
th, td {
padding: 8px;
}
thead th {
width: 25%;
}
.headtable{
flex: 1 1 auto;
overflow: hidden;
}
.shouldertable{
display: flex;
align-items: baseline;
overflow: hidden;
}
.kneetable{
flex-shrink: 1;
display: inline-flex;
overflow: hidden;
font-family: 'latobold', Arial, sans-serif;
}
.toestable{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-basis: 0;
box-flex: 1;
flex-grow: 1;
flex-shrink: 1;
text-align: left;
color: #5f6368;
empty-cells: show;
}
.nosetable{
white-space: nowrap;
float: left;
text-align: left;
}
.nosetablesendero{
white-space: nowrap;
color: #d9d9d9;
float: left;
text-align: left;
margin-top: 10px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 22px;
font-family: 'latolight', Arial, sans-serif;
}
.sender{
max-width: 100px;
padding-right: 32px;
width: 21%;
max-width: 106px;
padding-right: 32px;
width: 29%;
}
.tablenotifications{
width: 100%;
}
.notifications{
border-radius: 20px;
overflow: hidden;
}
.sentcolo{
max-width: 0;
min-width: 0;
}
.border {
padding: 10px;
border-color: red;
border: 1px solid green;
border-radius: 20px;
background-color: silver;
}
<div class="notifications">
<table class="tablenotifications">
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
<tr>
<td class="headtable sender"><div class="shouldertable"> <span class="kneetablesender"> <span class="nosetablesendero">EXAMPLE</span></span></div> </td>
<td class="sentcolo"><div class="headtable message"><div class="shouldertable"><div class="kneetable"> TITLE </div><span class="toestable"><span class="nosetable"> - </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </span></div></div></td>
</tr>
</table>
</div>