文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在tr：<tr>上获得边界半径？

问如何在tr：<tr>上获得边界半径？
EN

Stack Overflow用户

提问于 2016-07-18 09:18:42

回答 4查看 3.3K关注 0票数 3

首先，我有一个很大的<div class="content">，它包含<table>，我想要的是：

表(或内容)需要边框半径(10 Or)。
当在每一行上传递游标时(不是<table>，只是<tr>：背景颜色变化(没关系)，但是内容需要保持边框半径(现在->不行，这是我的问题)。

如何使显示的<div class=content">边界半径(现在tr正在覆盖它，边界半径在悬停时消失)

下面是一个简单的脚本(当悬停=相同宽度、相同边框半径时，黄色必须与灰色颜色相同)

.content{
  width:100%;
  height:auto;
  border-radius:10px;
  background-color:gray;
}

table{
  width:100%;
  cursor:pointer;
}

tr{
  width:100%;
  border-radius:10px !important;
}

table tr:hover{
  background-color:gold;
  border-radius:10px;
}

<div class="content">
<table>
<tr>
  <td>hello</td>
  <td>world</td>
</tr>
</table>
</div>

html

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-07-18 09:23:53

需要将border-radius应用于td元素。

使用:first-child和:last-child选择器来应用边框半径。

.content {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background-color: gray;
}
table {
  width: 100%;
  cursor: pointer;
}
tr {
  width: 100%;
  border-radius: 10px !important;
}
table tr:hover {
  background-color: gold;
  border-radius: 10px;
}
table tr:hover td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
table tr:hover td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

<div class="content">
  <table>
    <tr>
      <td>hello</td>
      <td>world</td>
    </tr>
  </table>
</div>

票数 5

Stack Overflow用户

发布于 2016-07-18 10:22:39

您需要将border-radius应用于td标记，而不是tr标记。假设表中有多个行，每个行包含多个单元格，则需要将border-radius设置为四个不同的单元格：

第一行第一个单元格的左上角，
第一行最后一个单元格的右上角，
最后一行的第一个单元格的左下角，
最后一行最后一个单元格的右下角。

以下是您将如何做到的：

table{
  background:gray;
  border-radius:10px;
  width:100%;
}
tr:hover>td{
  background:gold;
}
tr:first-child>td:first-child{
  border-top-left-radius:10px;
}
tr:first-child>td:last-child{
  border-top-right-radius:10px;
}
tr:last-child>td:first-child{
  border-bottom-left-radius:10px;
}
tr:last-child>td:last-child{
  border-bottom-right-radius:10px;
}

<table>
  <tbody>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Dolor</td>
    </tr>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Dolor</td>
    </tr>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Dolor</td>
    </tr>
  </tbody>
</table>

票数 2

Stack Overflow用户

发布于 2016-07-18 09:37:50

您还需要border-radius on td，这就是为什么这个颜色超过了tr的半径

我把border-top-left-radius和border-bottom-left-radius放在第一个td上，把border-top-right-radius和border-bottom-right-radius放在最后一个td上

如果有帮助请告诉我

.content{
  width:100%;
  height:auto;
  border-radius:10px;
  background-color:gray;
}

table{
  width:100%;
  cursor:pointer;
}

tr{
  width:100%;
  border-radius:10px !important;
}
td:last-child {
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
td:first-child{
   -webkit-border-top-left-radius: 10px;
   -webkit-border-bottom-left-radius: 10px;
   -moz-border-radius-topleft: 10px;
   -moz-border-radius-bottomleft: 10px;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
}

table tr:hover{
  background-color:gold;
  border-radius:10px;
}

<div class="content">
<table>
<tr>
  <td>hello</td>
  <td>world</td>
</tr>
</table>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38432931

复制

相似问题

问如何在tr：<tr>上获得边界半径？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在tr：<tr>上获得边界半径？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在tr：<tr>上获得边界半径？
EN