Table

Code for tables can get awfully complicated. However WebYep is able to make a table safely editable for website authors. Once logged in, the website author sees loop controls for adding table rows and buttons to edit content inside each cell. You could claim it's almost as easy as working with a spreadsheet! This zero-code approach eliminates the risk of a website author breaking the table. The table used in this example is slightly different, in that it's derived from the excellent table in Tailwind. Therefore the whole table is built using 'div' tags. The key advantages of this method being that a completed table is easier to style and the editing interface (shown to website authors) remains neatly presented. If needed, the table caption and table headers can be made editable too.

Example

HTML & PHP

<div class="responsive_table_wrapper">
  <div class="my_table">
    <div class="table_caption">2016 Atlantic Hurricanes</div>
    <div class="table_header_group">
      <div class="table_row">
        <div class="table_cell">Name</div>
        <div class="table_cell">Duration</div>
        <div class="table_cell">Peak wind (1-min)</div>
        <div class="table_cell">Minimal pressure</div>
      </div>
    </div>
    <div class="table_row_group">
      <?php foreach ((new WYLoopElement())->aLoopIDs("Table Row") as $webyep_oCurrentLoop->iLoopID) { $loopid=$webyep_oCurrentLoop->iLoopID; $_SESSION["loopid"]=$loopid; $webyep_oCurrentLoop->loopStart(true,$webyep_oCurrentLoop->iLoopID); ?>
      <div class="table_row">
        <div class="table_cell">
          <?php webyep_shortText("Cell 1", false, 550, 240); ?>
        </div>
        <div class="table_cell">
          <?php webyep_shortText("Cell 2", false, 550, 240); ?>
        </div>
        <div class="table_cell">
          <?php webyep_shortText("Cell 3", false, 550, 240); ?>
        </div>
        <div class="table_cell">
          <?php webyep_shortText("Cell 4", false, 550, 240); ?>
        </div>
      </div>
      <?php $webyep_oCurrentLoop->loopEnd(); } unset($_SESSION["loopid"]); ?>
    </div>
  </div>
</div>

CSS

.responsive_table_wrapper {
    overflow-x: auto;
}

.my_table {
    width: calc(100% - 2px);
    margin: 1rem 0;
    border-collapse: collapse;
    table-layout: auto;
    display: table;
    white-space: nowrap; /* Stops line wrapping */
}

.table_caption {
    display: table-caption;
    padding-bottom: 1rem;
    text-align: left;
}

@media screen and (min-width: 768px) {
    .table_caption {
        text-align: center;
    }
}

.table_header_group {
    display: table-header-group;
    font-weight: bold;
}

.table_row_group {
    display: table-row-group;
}

.table_row {
    display: table-row;
}

.table_cell {
    display: table-cell;
    padding: 0.25rem;
    border: 1px solid #ccc;
}

@media screen and (min-width: 768px) {
    .table_cell {
        padding: 0.50rem 1rem;
    }
}

Javascript