<table> <thead> <tr> <th scope="col" colspan="2">Название</th> <th scope="col">Кол-во</th> <th scope="col">Цена</th> </tr> </thead> <tbody> <tr> <td> <strong class="book-title">Не заставляйте меня думать</strong> <span class="text-offset">Стив Круг</span> </td> <td class="item-stock">На складе</td> <td class="item-qty">1</td> <td class="item-price">$30.02</td> </tr> <tr> <td> <strong class="book-title">UX-дизайн. Практическое руководство по проектированию опыта взаимодействия</strong> <span class="text-offset">Расс Унгер, Кэролайн Чендлер</span> </td> <td class="item-stock">На складе</td> <td class="item-qty">2</td> <td class="item-price">$52.94 <span class="text-offset item-multiple">$26.47 × 2</span></td> </tr> <tr> <td> <strong class="book-title"> Изучаем HTML5</strong> <span class="text-offset">Брюс Лоусон, Реми Шарп</span> </td> <td class="item-stock">Нет на складе</td> <td class="item-qty">1</td> <td class="item-price">$22.23</td> </tr> <tr> <td> <strong class="book-title">Пуленепробиваемый веб-дизайн</strong> <span class="text-offset">Дэн Сидерхолм</span> </td> <td class="item-stock">На складе</td> <td class="item-qty">1</td> <td class="item-price">$30.17</td> </tr> </tbody> <tfoot> <tr class="text-offset"> <td colspan="3">Сумма</td> <td>$135.36</td> </tr> <tr class="text-offset"> <td colspan="3">НДС</td> <td>$13.54</td> </tr> <tr> <td colspan="3">Итого</td> <td>$148.90</td> </tr> </tfoot> </table>
table { border-collapse: separate; border-spacing: 0; color: #4a4a4d; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; } th, td { padding: 10px 15px; vertical-align: middle; } thead { background: #395870; background: linear-gradient(#49708f, #293f50); color: #fff; font-size: 11px; text-transform: uppercase; } th:first-child { border-top-left-radius: 5px; text-align: left; } th:last-child { border-top-right-radius: 5px; } tbody tr:nth-child(even) { background: #f0f0f2; } td { border-bottom: 1px solid #cecfd5; border-right: 1px solid #cecfd5; } td:first-child { border-left: 1px solid #cecfd5; } .book-title { color: #395870; display: block; } .text-offset { color: #7c7c80; font-size: 12px; } .item-stock, .item-qty { text-align: center; } .item-price { text-align: right; } .item-multiple { display: block; } tfoot { text-align: right; } tfoot tr:last-child { background: #f0f0f2; color: #395870; font-weight: bold; } tfoot tr:last-child td:first-child { border-bottom-left-radius: 5px; } tfoot tr:last-child td:last-child { border-bottom-right-radius: 5px; }