2

Moving what was a collection of divs into a table for better column control.

My CSS class associated with the "row" doesn't seem to be carrying the border and webkit properties over when refactored into a table. W3C verified my thought that borders on tables should work (http://www.w3schools.com/css/css_table.asp)

What am I missing to show the CSS border and webkit properties in the table?

JSFiddles:

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

table: http://jsfiddle.net/phamousphil/tca7vfyv/

Code:

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

<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>
phamousphil
  • 254
  • 4
  • 15

1 Answers1

1

You're putting a border around what is now the tr element, and tr elements can't have borders by default. There's a nice explanation here: https://stackoverflow.com/a/18679047/1876899

You can either add border-collapse: collapse; to the table: Fiddle

Or add the border to the tds instead. Fiddle

.notification-popup-container td {
    border: 1px solid black;
}
Community
  • 1
  • 1
cjspurgeon
  • 1,497
  • 11
  • 20