JSFiddle - React, Tailwind, and code Playground

by StepBaro

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css">
<table class="responsive-table">
  <thead>
    <tr>
      <th>
        <ul>
          <li>Mon</li>
          <li>&nbsp;</li>
        </ul>
      </th>
      <th><ul>
          <li>Tue</li>
          <li>&nbsp;</li>
        </ul></th>
      <th><ul>
          <li>Wed</li>
          <li>&nbsp;</li>
        </ul></th>
      <th><ul>
          <li>Thr</li>
          <li>&nbsp;</li>
        </ul></th>
      <th><ul>
          <li>Fri</li>
          <li>&nbsp;</li>
        </ul></th>
      <th><ul>
          <li>Sat</li>
          <li>&nbsp;</li>
        </ul></th>
      <th><ul>
          <li>Sun</li>
          <li>&nbsp;</li>
        </ul></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
			<ul>
          <li>09:00-13:00</li>
          <li>10:00-14:30</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>09:00-13:00</li>
          <li>&nbsp;</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>09:00-13:00</li>
          <li>&nbsp;</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>09:00-13:00</li>
          <li>10:00-14:30</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>09:00-13:00</li>
          <li>10:00-14:30</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>09:00-13:00</li>
          <li>&nbsp;</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>09:00-13:00</li>
          <li>&nbsp;</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

CSS

/*
ul {
	margin:0px;
	padding:0px;
}

ul li {
	margin:0px;
	padding:0px;
}
*/

@media only screen and (max-width: 992px) {
	table.responsive-table thead tr th::before {
			content: "";
	}
}

/*

tr {
	outline: solid 1px red;
}

td {
	outline: solid 1px green;
}

th {
	outline: solid 1px green;
}

*/