Question

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

表格（或内容）需要border-radius（10px）
当光标传递到每一行（不是<table>而只是<tr>时：背景颜色改变（没关系），但内容需要保持边界半径（现在不行） - ＆gt;这是我的问题）

如何使<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>

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你border-radius上还需要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>

Answer 3

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

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

以下是您的表现方式：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 4

<强> HTML：

    <?php

        // USING PDO...
        //DATABASE CONNECTION CONFIGURATION:
        defined("HOST")         or define("HOST",           "localhost");
        defined("DBASE")        or define("DBASE",          "yourDB");
        defined("USER")         or define("USER",           "root");
        defined("PASS")         or define("PASS",           "root");

        ob_start();
        if(isset($_GET['userID'])!="") {
            $userID         = $_GET['userID'];
            try {
                $dbh        = new PDO('mysql:host='.HOST.';dbname='. DBASE,USER,PASS);
                $dbh->setAttribute(PDO::ATTR_ERRMODE, \PDO::ERRMODE_EXCEPTION);

                $query      = "DELETE FROM `tbl_users` WHERE userID='{$userID}'";
                $stmt       = $dbh->prepare($query);
                $deleteOK   = $stmt->execute();

                if ($deleteOK) {
                    header("Location:index.php");
                }

            }catch(PDOException $e){
                throw new Exception($e->getMessage());
            }
        }
        ob_end_flush();

<强> CSS：

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

</table>
</div>

如何在tr：hover上获得border-radius？

4 个答案: