Html 如何设计bootstrap 4元素的样式？

我有一个屏幕截图，如下所示，我在Bootstrap4中复制了它

在屏幕截图中，在行上悬停背景色：#EDEDED出现。

下面是上面截图的示例

我用来创建表的HTML代码是：

<div class="body-manage-attendees">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Number</th>
                <th scope="col">Table</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Amanda Doe</th>
                <td>250</td>
                <td>2</td>
                <td>Bill</td>
            </tr>
            <tr>
                <th scope="row">Andy Doe</th>
                <td>14</td>
                <td>1</td>
                <td>Bill</td>
            </tr>
            <tr>
                <th scope="row">Cameron Doe</th>
                <td>250</td>
                <td>4</td>
                <td>No Bill</td>
            </tr>
            <tr>
                <th scope="row">Dana Doe</th>
                <td>53</td>
                <td>5</td>
                <td>Bill</td>
            </tr>
            <tr>
                <th scope="row">Fred Doe</th>
                <td>250</td>
                <td>2</td>
                <td>Bill</td>
            </tr>
        </tbody>
    </table>
</div>

名称
数字
桌子
地位
阿曼达·多伊
250
2.
账单
安迪·多伊
14
1.
账单
卡梅隆母鹿
250
4.
没有账单
多伊
53
5.
账单
弗雷德·多伊
250
2.
账单

问题陈述：

---

我想知道我需要在CSS中添加什么，以便在行悬停时，背景色：#eded

bootstrap 3类似乎仍然有效。尝试将hover类添加到表中

<table class="table table-hover">

---

您可以随意重写该类，并根据需要更改颜色

将表格悬停类添加到表格中：

<table class="table table-hover">

---

编辑：

谢谢您的代码。我想知道你是否可以更新我提供的小提琴？

<table class="table table-hover">

table.table tr:hover td, table.table tr:hover th {
    background-color: #EDEDED;
}