I need to do a card for showing some data. I had some problems with the blue left box on the left side, and to add custom paddings. It think I can add padding with a more simple way, but I don't know how. I don't want to use nth-child because it's not supported on old IE. I want an opinion about my code :html<table class=card><tr class=padding-top>    <th class=blue>text</th>    <th class=padding-left>text</th>    <th>text</th>    <td class=button-cell rowspan=4>        <a class=button href=#>text</a>        <a class=button href=#>text</a>    </td></tr><tr>    <td class=last blue rowspan=6>text</td>    <td class=padding-left>text</td>    <td>text</td></tr><tr class=padding-top>    <th class=padding-left padding-top>text</th>    <th class=padding-top>text</th></tr><tr class=padding-bottom>    <td class=padding-left>text</td>    <td>text</td></tr><tr>    <td class=padding-left colspan=3><hr/></td></tr><tr class=padding-top>    <th class=padding-left colspan=3>text</th></tr><tr class=padding-bottom>    <td class=padding-left colspan=3>        Lucas ipsum dolor sit amet organa mandalore mon hutt         solo ackbar leia darth qui-gonn ponda. Moff gamorrean        calrissian ben maul ackbar skywalker ventress. Darth        wicket dagobah calrissian mon organa chewbacca binks        darth. K-3po palpatine organa ackbar utapau wookiee        secura hutt. Darth ackbar baba mothma biggs ahsoka        kenobi windu. Greedo k-3po calrissian c-3p0 solo       calrissian jango darth. Fett dooku moff dooku       jade grievous leia organa antilles. Ahsoka darth        hoth padm padm. Antilles chewbacca fisto         darth dagobah dagobah yavin fett.    </td></tr></table>css table.card {        border-spacing: 0;         border: 1px solid #C9C9C9;         border-radius: 3px;         margin-bottom: 20px;         width: 984px;         background-color: #FAFAFA;         color: #060606;         table-layout: fixed;         padding-right: 10px;     }     table.card:last-child {         margin-bottom: 0;    }    table.card tbody.expand .hidden {         display: none;     }     table.card tbody.collapse .hidden {         display: table-row;     }     table.card th.small-column {         width: 180px;     }     table.card th {         padding: 0;         text-align: left;         color: #007CB7;     }     table.card td {         padding-right: 10px;         word-wrap: break-word;     }     table.card .blue {         padding: 0 2px;         width: 50px;         background-color: #007CB7;         color: #FAFAFA;         text-align: center;         vertical-align: top;     }     table.card th.blue {         border-radius: 3px 0 0 0;     }     table.card td.last.blue {         border-radius: 0 0 0 3px;     }     table.card td.button-cell {         width: 110px;         vertical-align: middle;     }     table.card td.button-cell > a.button:last-child {         margin-top: 10px;     }     table.card td.button-cell > a.button {         display: block;     }     table.card .padding-left {         padding-left: 20px;     }     table.card tr.padding-top > td,     table.card tr.padding-top > th {         padding-top: 10px;     }     table.card tr.padding-bottom > td,     table.card tr.padding-bottom > th {         padding-bottom: 10px;     }
Is my code correct?
html;css