Question

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

我的CSS类与＆＃34;行＆＃34;相关联当重构到表中时，似乎没有携带border和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>

Answer 1

你在现在的tr元素周围放置一个边框，tr元素默认不具有边框。这里有一个很好的解释：https://stackoverflow.com/a/18679047/1876899

您可以在表格中添加border-collapse: collapse;：Fiddle

或者将边框添加到tds。 Fiddle

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

表格上的CSS边框和Webkit

1 个答案: