IE11: table background

by Stephane de Luca

HTML

<table class="tableBlackOrange">
    <tbody>
        <tr>
            <td class="key textOutline">
                <div class="image"></div>
                <div class="cut-arrow-right"></div>
                <p>Taupin</p>
            </td>
            <td>
                <div>
                    <div class="disk"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="key textOutline">
                <div class="image"></div>
                <div class="cut-arrow-right"></div>
                <p>Herbicide total</p>
            </td>
            <td>
                <div>
                    <div class="disk"></div>
                    <div class="disk"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="key textOutline">
                <div class="image"></div>
                <div class="cut-arrow-right"></div>
                <p>Intoxication ammoniacale</p>
            </td>
            <td>
                <div>
                    <div class="disk"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="key textOutline">
                <div class="image"></div>
                <div class="cut-arrow-right"></div>
                <p>Phytotoxicité contacts (bromoxynil, bentazone)</p>
            </td>
            <td>
                <div>
                    <div class="disk"></div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

table.tableBlackOrange {
    border: none;
    border: solid 4px lightgray;
    border-collapse: collapse;
    width: 100%;
    background-color: #d8dfe3;
}
table.tableBlackOrange > tbody > tr {
    height: 180px;
    border-top: solid 10px #d8dfe3;
    border-bottom: solid 10px #d8dfe3;
    background-color: #d0d7db;
}
table.tableBlackOrange > tbody > tr > th {
    vertical-align: middle;
    padding: 0;
    position: relative;
    color: white;
    text-align: center;
}
table.tableBlackOrange > tbody > tr > th > div.image {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
table.tableBlackOrange > tbody > tr > th > div.cut-arrow-right {
    border-color: transparent transparent #000000 transparent;
    border-style: solid;
    border-width: 20px;
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    left: calc(50% - 20px);
}
table.tableBlackOrange > tbody > tr > th p {
    padding: 18px;
    position: relative;
    font-family: HelveticaNeue-CondensedBold, arial;
}
table.tableBlackOrange > tbody > tr > td {
    vertical-align: middle;
    color: black;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.8);
}
table.tableBlackOrange > tbody > tr > td.key {
    width: 180px;
    padding: 0;
    background-position: center center;
    background-size: cover;
    background-color: #ffa500;
    position: relative;
    color: white;
    text-align: center;
}
table.tableBlackOrange > tbody > tr > td.key > div.image {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat no-repeat;
    background-image: url(http://www.moroccansands.com/images/highres/Tanger-City-Apartments-1.jpg);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
table.tableBlackOrange > tbody > tr > td.key > div.cut-arrow-right {
   ...