Martin-1
1/22/2018 - 7:36 PM

Making tables responsive and the text in the first row bold.

Making tables responsive and the text in the first row bold.

/* Making tables responsive and the text in the first row bold. */

tbody tr td:nth-of-type(1) {font-weight: bold;}
@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold; font-size:1.3em;}
tbody td {display: block;  text-align:center;}
tbody td:before { 
    content: attr(data-th); 
    display: block;
    text-align:center;  
  }
}
.table-1 td, .table-1 th {
white-space: normal !important;
}