JSFiddle - React, Tailwind, and code Playground

by jmeile

HTML

<table class="jm_thesis_table">
  <thead>
    <tr>
      <th scope="col">Title (Docs)</th>
      <th scope="col">Type</th>
      <th scope="col">Contact</th>
      <th scope="col">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Title (Docs)">
        <div class="jm_thesis_img">
          <img src="https://www.icvr.ethz.ch/ConfiguratorJM/thesis/finished/Language_I_161607100346140/Virtual_Teaching_Issues.jpg" />
        </div>
        Language-Independent Instructions for Training in Virtual Reality<br/>
        <a href="https://www.icvr.ethz.ch/ConfiguratorJM/thesis/finished/Language_I_161607100346140/SA_Language_Independent_Instructions.pdf">Description</a>
      </td>
      <td data-label="Type">Semester Project</td>
      <td data-label="Contact">
        <a href="">Christian Hirt</a><br/>
        <a href="">Stefan Süßmaier</a><br/>
        <a href="">Andreas Kunz</a><br/>
      </td>
      <td data-label="Date">18.08.2021</td>
    </tr>
    <tr>
      <td data-label="Title (Docs)">
        <div class="jm_thesis_img">
          <img src="https://www.icvr.ethz.ch/ConfiguratorJM/thesis/finished/Infinite_V_161106169919523/Picture3.jpg" />
        </div>
        Infinite Virtual Labyrinth - An Adapting Maze for Spatial Awareness Tests<br/>
        <a href="https://www.icvr.ethz.ch/ConfiguratorJM/thesis/finished/Infinite_V_161106169919523/BASA_Labyrinth.pdf">Description</a>
      </td>
      <td data-label="Type">Semester Project</td>
      <td data-label="Contact">
        <a href="">Christian Hirt</a><br/>
        <a href="">Joy Gisler</a><br/>
        <a href="">Andreas Kunz</a><br/>
      </td>
      <td data-label="Date">10.08.2021</td>
    </tr>
    <tr>
      <td data-label="Title (Docs)">
        <div class="jm_thesis_img">
          <img src="https://www.icvr.ethz.ch/ConfiguratorJM/thesis/finished/Occlusion__161106174209457/Picture4.png" />
        </div>
        Redirected Walking in Overlapping Rooms<br/>
        <a...

CSS

/* Title (Docs) column */
/*
.jm_thesis_table tr > *:nth-child(1) {
  width: 60%; 
}
*/

/* Type column */
/*
.jm_thesis_table tr > *:nth-child(2) {
  width: 15%;
}
*/

/* Contact column */
/*
.jm_thesis_table tr > *:nth-child(3) {
  width: 20%; 
}
*/

/* Date */
/*
.jm_thesis_table tr > *:nth-child(4) {
  width: 5%;
}
*/

.jm_thesis_img {
  float: left;
  background-color: #ff0000;
  height: 100%;
  margin-right: 10px;
  min-height: 42px;
}

.jm_thesis_table {
  height: 100%;
  border: 0px;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
}

.jm_thesis_table tr {
  padding: .35em;
}

.jm_thesis_table th,
.jm_thesis_table td {
  padding: .625em;
  text-align: left;
  vertical-align: top;
}

.jm_thesis_table td {
  height: 100%;
}

table.jm_thesis_table tr:nth-child(odd) {
  background-color: #eee;
}

table.jm_thesis_table tr:nth-child(even) {
  background-color: #fff;
}

@media
  only screen 
  and (max-width: 730px)  {
  /* Force table to not be like tables anymore */
  .jm_thesis_table, .jm_thesis_table thead, .jm_thesis_table tbody,
  .jm_thesis_table th, .jm_thesis_table td, .jm_thesis_table tr {
    display: block;
  }
  
  /*
  .jm_thesis_table tr > *:nth-child(1),
  .jm_thesis_table tr > *:nth-child(2),
  .jm_thesis_table tr > *:nth-child(3),
  .jm_thesis_table tr > *:nth-child(4) {
    width: 85%;
  }
  */

  /* Hide table headers (but not display: none;, for accessibility) */
  .jm_thesis_table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .jm_thesis_table tr {
    margin: 0 0 1rem 0;
  }

  table.jm_thesis_table tr:nth-child(odd) {
    background: #eee;
  }
  
  table.jm_thesis_table tr:nth-child(even) {
    background: #ccc;
  }

  .jm_thesis_table td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #fff;
    position: relative;
    padding-left: 20%;
  }

  .jm_thesis_table td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values...