Html 如何在悬停时向表tr元素添加框阴影？

因此，我试图在悬停时向我的table tr元素添加一个框阴影

目前，它在Firefox中运行良好，但没有其他浏览器

CSS:

HTML:

以下是它在Firefox中显示的图像：

以下是它在Chrome中显示的图像：

---

如何编辑我的CSS以将此框阴影悬停应用于所有浏览器？

这是我编辑的CSS

table { 
   box-sizing: border-box; 
   border-bottom: 1px solid #e8e8e8; 
}
table tbody tr:hover {
   background-color:#13326b;
   color:#ffffff;
   text-shadow: 1px 2px #000000;
   box-shadow: 0px 0px 10px #ff0000;
   -webkit-box-shadow: 0px 0px 10px #ff0000;
   -moz-box-shadow: 0px 0px 10px #ff0000;
}
 td, th { 
    padding-left: 16px; 
    min-width: 170px; 
    text-align: left; 
}
tr { 
    display: block; 
}
table tbody tr , table tbody td{
    height:100px;
} 

这里是演示链接 -

试试这样的方法

有关解释，请查看此项

---

如用户1153551所述，显示块会破坏整个表格布局。谁投票了？这完全是一个糟糕的反应！工作正常，尽管它似乎会破坏表头的布局Shortly tr{display:block}->这是一种补救措施，也是一个问题，但td，th块试图模仿表行上的正常arraydisplay块，这导致了实际使用表制动器的所有原因。首先最好使用div。不幸的是，如果我们要为所有元素添加背景色，那么这个解决方案将不起作用。向tr添加display:block在某些情况下可能会起作用，但并不理想。尝试将样式添加到tr:hover td。

<table class="table table-list-search">
        <thead>
            <tr>
                <th>Logo</th>
                <th>Name</th>
                <th>Symbol</th>
                <th>Sector</th>
                <th>Sub-Sector</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Sample</td>
                <td>Filter</td>
                <td>12-11-2011 11:11</td>
                <td>OK</td>
                <td>123</td>
            </tr>
            <tr>
                <td>Try</td>
                <td>It</td>
                <td>11-20-2013 08:56</td>
                <td>It</td>
                <td>Works</td>
            </tr>
            <tr>
                <td>§</td>
                <td>$</td>
                <td>%</td>
                <td>&</td>
                <td>/</td>
            </tr>
        </tbody>
    </table>

table { 
   box-sizing: border-box; 
   border-bottom: 1px solid #e8e8e8; 
}
table tbody tr:hover {
   background-color:#13326b;
   color:#ffffff;
   text-shadow: 1px 2px #000000;
   box-shadow: 0px 0px 10px #ff0000;
   -webkit-box-shadow: 0px 0px 10px #ff0000;
   -moz-box-shadow: 0px 0px 10px #ff0000;
}
 td, th { 
    padding-left: 16px; 
    min-width: 170px; 
    text-align: left; 
}
tr { 
    display: block; 
}
table tbody tr , table tbody td{
    height:100px;
} 

tr { display: block; }