skip to Main Content

I am trying to create a responsive table here:
http://websunweaved.com/mikes-cutco-discount-price-list/

I’m following this page:
https://css-tricks.com/responsive-data-tables/

My CSS and table are in a text module – search “et_pb_text_inner” in the page source.

Something must be stopping it from formatting because it works by itself.

I’ve tried putting the CSS in the Divi Theme Options –> Custom CSS and it still didn’t format properly.

Any insight would be appreciated. Thank you!

2

Answers


  1. Chosen as BEST ANSWER

    This solved my issue: https://codepen.io/AllThingsSmitty/pen/MyqmdM

        <table>
          <caption>Statement Summary</caption>
          <thead>
            <tr>
              <th scope="col">Account</th>
              <th scope="col">Due Date</th>
              <th scope="col">Amount</th>
              <th scope="col">Period</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-label="Account">Visa - 3412</td>
              <td data-label="Due Date">04/01/2016</td>
              <td data-label="Amount">$1,190</td>
              <td data-label="Period">03/01/2016 - 03/31/2016</td>
            </tr>
            <tr>
              <td scope="row" data-label="Account">Visa - 6076</td>
              <td data-label="Due Date">03/01/2016</td>
              <td data-label="Amount">$2,443</td>
              <td data-label="Period">02/01/2016 - 02/29/2016</td>
            </tr>
            <tr>
              <td scope="row" data-label="Account">Corporate AMEX</td>
              <td data-label="Due Date">03/01/2016</td>
              <td data-label="Amount">$1,181</td>
              <td data-label="Period">02/01/2016 - 02/29/2016</td>
            </tr>
            <tr>
              <td scope="row" data-label="Acount">Visa - 3412</td>
              <td data-label="Due Date">02/01/2016</td>
              <td data-label="Amount">$842</td>
              <td data-label="Period">01/01/2016 - 01/31/2016</td>
            </tr>
          </tbody>
        </table>
    

    And the CSS

        body {
          font-family: "Open Sans", sans-serif;
          line-height: 1.25;
        }
        table {
          border: 1px solid #ccc;
          border-collapse: collapse;
          margin: 0;
          padding: 0;
          width: 100%;
          table-layout: fixed;
        }
        table caption {
          font-size: 1.5em;
          margin: .5em 0 .75em;
        }
        table tr {
          background: #f8f8f8;
          border: 1px solid #ddd;
          padding: .35em;
        }
        table th,
        table td {
          padding: .625em;
          text-align: center;
        }
        table th {
          font-size: .85em;
          letter-spacing: .1em;
          text-transform: uppercase;
        }
        @media screen and (max-width: 600px) {
          table {
            border: 0;
          }
          table caption {
            font-size: 1.3em;
          }
          table thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
          }
          table tr {
            border-bottom: 3px solid #ddd;
            display: block;
            margin-bottom: .625em;
          }
          table td {
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: .8em;
            text-align: right;
          }
          table td:before {
            /*
            * aria-label has no advantage, it won't be read inside a table
            content: attr(aria-label);
            */
            content: attr(data-label);
            float: left;
            font-weight: bold;
            text-transform: uppercase;
          }
          table td:last-child {
            border-bottom: 0;
          }
        }
    

    Thank you all!


  2. To achieve a fully responsive table it is necessary to use “datatalbe”

    Html code:

    <div class="table-responsive">
                            <!-- Table -->
                            <table id="listaRoles" class="table table-bordered table-striped table-hover dataTable js-exportable">
                                <thead>
                                <tr>
                                    <th>Names</th>
                                    <th>Surnames</th>
                                </tr>
                                </thead>
                                <tbody >
                                </tbody>
                            </table>
                            <!-- #END# Table -->
                        </div>
    

    Required Scripts:

    <!-- Jquery DataTable Plugin Js -->
    <script src="/plugins/jquery-datatable/jquery.dataTables.js"></script>
    <script src="/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
    <script src="/plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js"></script>
    <script src="/plugins/jquery-datatable/extensions/export/buttons.flash.min.js"></script>
    <script src="/plugins/jquery-datatable/extensions/export/jszip.min.js"></script>
    <script src="/plugins/jquery-datatable/extensions/export/pdfmake.min.js"></script>
    <script src="/plugins/jquery-datatable/extensions/export/vfs_fonts.js"></script>
    <script src="/plugins/jquery-datatable/extensions/export/buttons.html5.min.js"></script>
    <script src="/plugins/jquery-datatable/extensions/export/buttons.print.min.js"></script>
    

    Css :

    <link href="/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css" rel="stylesheet">
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search