i

Learn HTML and CSS in 10 Days

Completely Styled Table

Till now we have dealt with a lot of stuff. Now let's style some of our text and provide some round corners to our table.

HTML

CSS

table {

  border-collapse: separate;

  border-spacing: 0.1;

  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;

}

.books-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;

}