表格上的 CSS 边框和 Webkit答案

【问题标题】：CSS Borders and Webkit on Tables表格上的 CSS 边框和 Webkit
【发布时间】：2014-12-18 12:32:23
【问题描述】：

将 div 集合移动到表格中，以便更好地控制列。

与“行”关联的 CSS 类在重构为表格时似乎没有携带边框和 webkit 属性。 W3C 验证了我的想法，即表格上的边框应该起作用 (http://www.w3schools.com/css/css_table.asp)

在表格中显示 CSS 边框和 webkit 属性时缺少什么？

JSFiddles：

div：http://jsfiddle.net/phamousphil/rgt03mu4/

表：http://jsfiddle.net/phamousphil/tca7vfyv/

代码：

CSS

.notification-popup-container {
    background-color: #fff;
    border: 1px solid black;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    overflow: visible;
    width: 400px;
    z-index: 99;
    display: none;
}

HTML 表格

<table class="notification-popup-container-main">
    <tbody>
        <tr class="notification-popup-container">
            <td class="notification-type">
                <div>TYPE TYPE</div>
            </td>
            <td class="notification-popup-body">
                <div class="notification-popup-title">TITLE</div>
                <div class="notification-popup-message">MESSAGE</div>
            </td>
        </tr>
    </tbody>
</table>

【问题讨论】：

标签： html css webkit border

【解决方案1】：

您正在为现在的 tr 元素设置边框，而 tr 元素默认情况下不能有边框。这里有一个很好的解释：https://stackoverflow.com/a/18679047/1876899

您可以将border-collapse: collapse; 添加到表中：Fiddle

或者改为将边框添加到 tds。 Fiddle

.notification-popup-container td {
    border: 1px solid black;
}

【讨论】：

感谢您的信息！看起来将 webkit 添加到 td 也可以。