Question

我想在这里创建一个响应表： http://websunweaved.com/mikes-cutco-discount-price-list/

我正在关注此页面： https://css-tricks.com/responsive-data-tables/

我的CSS和表位于文本模块中 - 在页面源中搜索“et_pb_text_inner”。

某些东西必须阻止格式化，因为它本身就可以工作。

我尝试将CSS放入Divi主题选项 - ＆gt;自定义CSS，它仍然没有正确格式化。

任何见解都将受到赞赏。谢谢！

Answer 1

要实现完全响应的表，必须使用“datatalbe”

Html代码：

<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>

必填脚本：

<!-- 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">

Answer 2

这解决了我的问题：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>

和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;
      }
    }

谢谢大家！

CSS响应表未显示

2 个答案: