CSS響應表不顯示

我想創建一個響應表在這裏： http://websunweaved.com/mikes-cutco-discount-price-list/CSS響應表不顯示

我下面這個頁面： https://css-tricks.com/responsive-data-tables/

我的CSS和表是在文本模塊 - 搜索「 et_pb_text_inner「。

某些東西必須阻止格式化，因爲它本身起作用。

我已經嘗試把CSS中的DivI主題選項 - >自定義CSS，它仍然沒有格式正確。

任何有識之士將不勝感激。謝謝！

來源

2017-12-27 Mike

它在這裏工作：https：//jsfiddle.net/13gsmdpr/但不是在我的頁面。 – Mike

實現完全響應表，必須使用「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">

來源

2017-12-27 17:42:49

這解決了我的問題問題：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; 
     } 
    }

謝謝大家！

來源

2018-01-05 21:14:42 Mike

CSS響應表不顯示

回答

相關問題