/* Start custom CSS *//* ===== Responsive tables — web design cost article ===== */

/* Every table in the article is wrapped in <div class="table-scroll"> */
.table-scroll {
  width: 100%;
  overflow-x: auto;                 /* horizontal scroll if a table is ever too wide */
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
}

.table-scroll table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto;
  font-size: 15px;
}

.table-scroll th,
.table-scroll td {
  padding: 10px 12px !important;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Phones: shrink type/padding and let long cells wrap instead of overflowing */
@media (max-width: 600px) {
  .table-scroll table {
    font-size: 13.5px !important;
  }
  .table-scroll th,
  .table-scroll td {
    padding: 8px 9px !important;
    white-space: normal !important;
  }
}/* End custom CSS */