1
\$\begingroup\$

I have been looking for a way to display tabular data in a way that is optimal both for large (desktop) and small (smartphone) devices.

I use divs instead of tables.

class ResponsiveTableComponent {
  constructor() {
    this.responsiveTable = document.querySelector(".responsiveTable");
    this.responsiveTableHeading = this.responsiveTable.querySelector(
      ".responsiveTable__tableHeading .responsiveTable__tableRow"
    );
    this.responsiveTableBody = this.responsiveTable.querySelector(
      ".responsiveTable__tableBody"
    );
    this.responsiveTableRows = this.responsiveTableBody.querySelectorAll(
      ".responsiveTable__tableRow"
    );
  }

  insertRow() {
    this.responsiveTableRows.forEach((row) => {
      let headingCopy = this.responsiveTableHeading.cloneNode(true);
      headingCopy.classList.add("responsiveTable__tableRowCopy");
      this.responsiveTableBody.appendChild(headingCopy);
      headingCopy.after(row);
    });
  }

  init() {
    this.insertRow();
  }
}
const responsiveTableComponent = new ResponsiveTableComponent();
responsiveTableComponent.init();
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body * {
  box-sizing: border-box;
}

.responsiveTable {
  font-size: 13px;
  border-collapse: collapse;
}

.responsiveTable-bordered {
  border: 1px solid #ccc;
  margin: 5px;
}

.responsiveTable__tableHeading {
  border-bottom: 2px solid #ccc;
  display: none;
}

.responsiveTable__tableCell, .responsiveTable__tableHead {
  padding: 8px 4px;
  white-space: nowrap;
}

.responsiveTable__tableBody {
  display: flex;
  flex-wrap: wrap;
}

.responsiveTable__tableBody .responsiveTable__tableHeading,
.responsiveTable__tableBody .responsiveTable__tableRow {
  display: block;
  width: 50%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.responsiveTable__tableBody .responsiveTable__tableHead {
  font-weight: bold;
}

@media (min-width: 992px) {
  .responsiveTable {
    display: table;
    width: 100%;
  }
  
  .responsiveTable__tableRow {
    display: table-row;
  }
  
  .responsiveTable__tableHeading {
    display: table-header-group;
    font-weight: bold;
  }
  
  .responsiveTable__tableCell, .responsiveTable__tableHead {
    display: table-cell;
    padding: 10px 5px;
  }
  
  .responsiveTable__tableCell {
    color: #565656;
  }
  
  .responsiveTable__tableBody {
    display: table-row-group;
  }
  
  .responsiveTable__tableBody .responsiveTable__tableRow {
    width: 100%;
    display: table-row;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .responsiveTable__tableBody .responsiveTable__tableRowCopy {
    display: none;
  }
}
<div class="responsiveTable responsiveTable">
  <div class="responsiveTable__tableHeading">
    <div class="responsiveTable__tableRow">
      <div class="responsiveTable__tableHead">Full Name</div>
      <div class="responsiveTable__tableHead">Email</div>
      <div class="responsiveTable__tableHead">Address</div>
    </div>
  </div>
  <div class="responsiveTable__tableBody">
    <div class="responsiveTable__tableRow">
      <div class="responsiveTable__tableCell">Leanne Graham</div>
      <div class="responsiveTable__tableCell">sincere@april.biz</div>
      <div class="responsiveTable__tableCell">1414 Lamberts Branch Road</div>
    </div>
    <div class="responsiveTable__tableRow">
      <div class="responsiveTable__tableCell">Ervin Howell</div>
      <div class="responsiveTable__tableCell">shanna@melissa.tv</div>
      <div class="responsiveTable__tableCell">1414 Lamberts Branch Road</div>
    </div>
    <div class="responsiveTable__tableRow">
      <div class="responsiveTable__tableCell">Clementine Bauch</div>
      <div class="responsiveTable__tableCell">nathan@yesenia.net</div>
      <div class="responsiveTable__tableCell">1415 Lamberts Branch Road</div>
    </div>
    <div class="responsiveTable__tableRow">
      <div class="responsiveTable__tableCell">Patricia Lebsack</div>
      <div class="responsiveTable__tableCell">julianne.oconner@kory.org</div>
      <div class="responsiveTable__tableCell">1415 Lamberts Branch Road</div>
    </div>
    <div class="responsiveTable__tableRow">
      <div class="responsiveTable__tableCell">Chelsey Dietrich</div>
      <div class="responsiveTable__tableCell">lucio_hettinger@annie.ca</div>
      <div class="responsiveTable__tableCell">1415 Lamberts Branch Road</div>
    </div>
    <div class="responsiveTable__tableRow">
      <div class="responsiveTable__tableCell">Dennis Schulist</div>
      <div class="responsiveTable__tableCell">karley_dach@jasper.info</div>
      <div class="responsiveTable__tableCell">1415 Sun Road</div>
    </div>
    <div class="responsiveTable__tableRow">
      <div class="responsiveTable__tableCell">Kurtis Weissnat</div>
      <div class="responsiveTable__tableCell">telly.hoeger@billy.biz</div>
      <div class="responsiveTable__tableCell">1415 Sun Road</div>
    </div>
    <div class="responsiveTable__tableRow">
      <div class="responsiveTable__tableCell">Nicholas Runolfsdottir V</div>
      <div class="responsiveTable__tableCell">sherwood@rosamond.me</div>
      <div class="responsiveTable__tableCell">1415 Sun Road</div>
    </div>
    <div class="responsiveTable__tableRow">
      <div class="responsiveTable__tableCell">Glenna Reichert</div>
      <div class="responsiveTable__tableCell">chaim_mcdermott@dana.io</div>
      <div class="responsiveTable__tableCell">1415 Sun Road</div>
    </div>
    <div class="responsiveTable__tableRow">
      <div class="responsiveTable__tableCell">Clementina DuBuque</div>
      <div class="responsiveTable__tableCell">rey.padberg@karina.biz</div>
      <div class="responsiveTable__tableCell">1415 Sun Road</div>
    </div>
  </div>
</div>

My concerns are:

  1. Did I use too much CSS?
  2. Was using BEM a good idea?
\$\endgroup\$
5
  • \$\begingroup\$ @ferada It is responsive tabular data. What is not clear? \$\endgroup\$ – Razvan Zamfir Mar 17 at 21:39
  • \$\begingroup\$ @ferada That's just an example, of course. \$\endgroup\$ – Razvan Zamfir Mar 17 at 21:51
  • \$\begingroup\$ Please disregard my earlier comments then, hope you get some good reviews. \$\endgroup\$ – ferada Mar 17 at 21:52
  • \$\begingroup\$ For more info on "BEM" see: getbem.com \$\endgroup\$ – KIKO Software Mar 18 at 7:53
  • \$\begingroup\$ @KIKOSoftware Please add a code review (answer). Thank you! :) \$\endgroup\$ – Razvan Zamfir Mar 19 at 5:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.