在桌子头周围画框阴影答案

【问题标题】：Drawing box shadow around table thead在桌子头周围画框阴影
【发布时间】：2019-08-07 22:38:09
【问题描述】：

正如你在这个小提琴中看到的，http://jsfiddle.net/S8Bne/64/，我试图在桌子周围画一个盒子阴影（只是它的外面）。我采用的方法是创建一个高度略大于 thead 区域的 div 并给它一个盒子阴影。但是，我不能完全正确地定位它。我该怎么做？

欢迎任何解决方案。

【问题讨论】：

标签： css compass-sass css-tables

【解决方案1】：

发生这种情况是因为您的 thead 不在 div 内。

我在div 中添加了一些height 以显示...

问题：http://jsfiddle.net/jasongennaro/S8Bne/54/

添加这个

-webkit-box-shadow:#8A0000 2px 2px 10px;
box-shadow:#8A0000 2px 2px 10px;

到

.geniusPicks table tr#picksHeading th

而且它有效。

工作示例：http://jsfiddle.net/jasongennaro/S8Bne/55/

所以不需要div

【讨论】：

是的，这行得通，但在我实际的 CSS/HTML 中，我没有使用红色背景。所以您的解决方案如下所示：jsfiddle.net/S8Bne/56。我只希望阴影显示在外面。我会更新我的问题。考虑到我提出问题的方式，您的解决方案非常完美。
其实，也许我需要做的就是稍微增加 div 的高度，然后将其包裹在内...让我们看看...

【解决方案2】：

如果你想在不使用div的情况下给tad添加阴影，试试下面的代码

   table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    
    table thead{
    display:block;
    position:relative;
    box-shadow: 0px 1px 3px 0px #cccccc;
    }
    
    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    
    table tr{
    display:table;
    table-layout:fixed;
    width:100%;
    }

    <table>
    <thead>
      <tr>
        <th>Company</th>
        <th>Owner</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alfred Trading</td>
        <td>Alfred Thomas</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Australia</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helena Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus</td>
        <td>John Cook</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </tbody>  
    </table>

【讨论】：