How to run box shadow in Chrome and add a space between td tags

Question

1 . The box shadow works well in the IE and Firefox but it doesn't work in Chrome. Here is my CSS:

    body {
        background-color: #F6F6F6;
    }

    #showRoom {
        margin-left: 10px;
        margin-top: 10px;
        width: auto;
        border-collapse: collapse;
    }

    table .box_shadow {
        background-color: #FFF;
        width: 175px;
        height: 175px;
        font-size: 18px;
        line-height: 20px;
        text-align: center;
        font-weight: normal;
        font-family: 'Scada', sans-serif;
        -webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
    }

    table tr .text_plan {
        background-color: #FFF;
        width: 175px;
        height: 175px;
        font-size: 18px;
        line-height: 20px;
        text-align: center;
        font-weight: normal;
        font-family: 'Scada', sans-serif;
    }

    .news {
        width: 309px;
        height: 175px;
        /*background-color: rgba(255, 0, 0, 0.5);*/
        background-color: #FFF;
        position: relative;
    }

        .news:hover {
            cursor: pointer;
        }

    .news_img {
        width: 309px;
        height: 45px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        font-family: 'Times New Roman';
        font-weight: bold;
        letter-spacing: 0.5px;
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: 0.95;
    }

        .news_img div {
            width: 309px;
            height: 20px;
            margin: 0;
            padding: 0;
            display: table-cell;
            vertical-align: middle;
        }

            .news_img div p {
                font-size: 15px;
                color: #FFF;
            }

    span.imgswap {
        display: block;
    }

2 . I would like to add a space between two <td> tags as an image below:

Here is the JSFIDDLE : http://jsfiddle.net/huydq91/HQ6Eu/

Answer 1

Try this:

1. Add display:block; to your table .box_shadow css:

    table .box_shadow { background-color: #FFF; width: 175px; height: 175px; font-size: 18px; line-height: 20px; text-align: center; font-weight: normal; font-family: 'Scada', sans-serif; display:block; -moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2); -webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2); box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2); } 

2. To add a space between two <td> tags use this:

    .news:nth-child(odd), .news_img:nth-child(odd){ padding-right: 20px; } 

DEMO

Answer 2

img classes should have a margin or padding to space them out.. see fiddle:

http://jsfiddle.net/jFIT/HQ6Eu/3/

.news:nth-child(2), .news_img:nth-child(2)
{
    margin-left:50px;
}