table {
  border-collapse: collapse;
  border-spacing: 0;
  width:100%;
  max-width: 100%;  
  height: auto;
  vertical-align: middle;   
  border: 1px solid #ddd;
}

th, td {
  text-align: CENTER;
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-left: 4px;
  width: auto;
  min-width: auto;
}
td {
  padding: 0px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

tr:nth-child(even) {
  background-color: #e2e2e2;
}

th.weather-header{
  background-color: #808080 ;
  color: white !important;
}

th.weather-header-harbour{
   text-align: left !important;
}

td.weather-header-harbour{
   text-align: left !important;
}

@media screen and (min-width: 480px) and (max-width: 801px) {
  th, td { 
    font-size:  0.55em !important;
  }

  h3 {
    font-size:  1.2em  !important;
  }
}

@media (max-width: 480px){
  th, td { 
    font-size:  0.35em !important;
  }

  h3 {
    font-size:  1.5em !important;
  }
}