Question

正如你在这个小提琴中看到的那样，http://jsfiddle.net/S8Bne/64/，我试图在桌子周围绘制一个盒子阴影（就在外面）。我采用的方法是创建一个比thead区域略高的div，并给它一个盒子阴影。但是，我无法正确定位它。我怎么能这样做？

欢迎任何解决方案。

Answer 1

这种情况正在发生，因为thead不在div内。

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

问题：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

Answer 2

如果您想在不使用div的情况下为阴影添加阴影，请尝试以下代码

   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>

在桌thead附近的图画箱子阴影

2 个答案: