相关疑难解决方法(0)

我有一个像这样的简单html表:

<table>
  <thead>
    <tr><th>Column 1</th><th>Column 2</th></tr>
  </thead>
  <tbody>
    <tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr>
    <tr class="even"><td>Value 3</td><td>Value 4</td></tr>
    <tr class="odd"><td>Value 5</td><td>Value 6</td></tr>
    <tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr>
  </tbody>
</table>

我想通过以下方式设计它:

• 带有框阴影的标题行
• 标题行和第一个正文行之间的空格

我尝试了不同的东西:

table {
    /* collapsed, because the bottom shadow on thead tr is hidden otherwise */
    border-collapse: collapse;
}
/* Shadow on the header row*/
thead tr   { box-shadow: 0 1px 10px #000000; }
/* Background colors defined on table cells */
th         { background-color: #ccc; }
tr.even td …

我正在尝试为TR表内的元素创建嵌入框阴影效果,但没有成功.我使用以下CSS:

tr {
     -moz-box-shadow: inset 0 0 5px #888;
     -webkit-box-shadow: inset 0 0 5px#888;
     box-shadow: inner 0 0 5px #888;
  }

现场演示:http://jsbin.com/urage5/edit

是否无法在tr元素上创建该效果？

所以我试图tr在悬停时向我的表元素添加一个框阴影.

目前,它在Firefox中完美运行,但没有其他浏览器.

CSS:

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

HTML:

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

以下是它在Firefox中的显示方式:

以下是Chrome中显示内容的图片:

在这里演示

我怎么能编辑我的CSS来为所有浏览器应用这个盒子阴影悬停？