logo标签列表

将HTML表格分割以适应视口宽度

javascripthtmlcssresponsive-design
3

我是一名有用的助手，可以为您进行文本翻译。

我有一个包含许多列的HTML表格。我想要将表格分割以适应视口宽度，如下所示：

基本表格

      | Column 1 | Column 2 | Column 3 | Column 4
------+----------+----------+----------+---------
Row 1 | (1,1)    | (1,2)    | (1,3)    | (1,4)
Row 2 | (2,1)    | (2,2)    | (2,3)    | (2,4)

我希望你能提供的内容

      | Column 1 | Column 2
------+----------+---------
Row 1 | (1,1)    | (1,2)
Row 2 | (2,1)    | (2,2)

      | Column 3 | Column 4
------+----------+---------
Row 1 | (1,3)    | (1,4)
Row 2 | (2,3)    | (2,4)

包含“行X”和“列X”的单元格是表头，我希望在换行的表格中保留它们。

是否可以使用HTML/CSS/Javascript实现响应式拆分表格？

编辑1： 我的HTML代码：

<table>
  <thead>
    <tr>
      <th></th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>(1,1)</td>
      <td>(1,2)</td>
      <td>(1,3)</td>
      <td>(1,4)</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>(2,1)</td>
      <td>(2,2)</td>
      <td>(2,3)</td>
      <td>(2,4)</td>
    </tr>
  </tbody>

你能展示一下你正在使用的代表性HTML吗？ - David Thomas
@DavidThomas，请看我的编辑。 - Sten Wessel
@stencil98，我认为使用HTML表格元素并不容易实现。你考虑过改用div元素了吗？ - choz
3个回答
2

以下是一个JS解决方案，可供您开始使用。该解决方案可以通过多种方式进行优化，您可以根据自己的项目要求进行调整。总的来说，我喜欢快速hack这个小样本。

这里是代码pen：http://codepen.io/anon/pen/RPLvyN。（水平调整屏幕大小以查看效果）。

    function FlexTable(el, container) {
      if(!(this instanceof FlexTable)) {
        return new FlexTable(el, container);
      }

      this.$el = $(el);
      this.$container = $(container);
      this.tables = [{
        $el: this.$el,
        columns: []
      }];
      this.getInfo();
      this.extractData();
      this.extractLabels();
      this.handleResizing();
      this.restructure();
    }

    FlexTable.prototype.getInfo = function() {
      this.columns = [];
      this.$el.find("thead th").each(function(key, el) {
        this.columns.push($(el).outerWidth());
      }.bind(this));
      this.tables[0].columns = this.columns.slice(1);
    };

    FlexTable.prototype.extractData = function() {
      this.data = [];
      this.rows = -1;
      $("tbody td").each(function(index, element) {
        if(index % (this.columns.length - 1) === 0) {
          this.data[++this.rows] = [];
        }
        this.data[this.rows].push($(element).text().trim());
      }.bind(this));
    };

    FlexTable.prototype.extractLabels = function() {
      this.columnLabels = [];
      this.rowLabels = [];

      this.$el.find("thead > tr > :nth-of-type(n + 2)").each(function(index, element) {
        this.columnLabels.push($(element).text().trim());
      }.bind(this)).end().find("tbody > tr > :first-child")
        .each(function(index, element) {
        this.rowLabels.push($(element).text().trim());    
      }.bind(this));
    };

    FlexTable.prototype.handleResizing = function() {
      this.$container.resize(function() {
        this.restructure();    
      }.bind(this));
    };

    FlexTable.prototype.availableSpace = function(flatten) {
      return flatten ? +Infinity : this.$container.outerWidth();
    };

    FlexTable.prototype.possibleTables = function() {
      var space = this.availableSpace();
      var total = 0;
      var column = 0;
      var numTables = 0;
      var tables = [];

      while(true) {
        total = this.columns[0];
        tables[numTables] = {
          $el: null,
          columns: []
        };

        do {
          total += this.columns[++column];
          tables[numTables].columns.push(column - 1);
        } while((total + this.columns[column + 1]) < space);

        numTables++;

        if(column === this.columns.length - 1) {
          break;
        }
      }

      return tables;
    };

    FlexTable.prototype.sameTablesAsBefore = function(tables) {
      if(this.tables.length !== tables.length) {
        return false;
      }

      for(var i = 0, len = tables.length; i < len; i++) {
        if(tables[i].columns.length !== this.tables[i].columns.length) {
          return false;
        }
      }

      return true;
    };

    FlexTable.prototype.clearExistingTables = function() {
      this.tables.forEach(function(table) {
        table.$el.remove();    
      });  
    };

    FlexTable.prototype.tableTemplate = function() {
      var $table = $("<table></table>");
      var $tbody = $("<tbody></tbody>");
      $table.append("<thead><tr><th></th></tr></thead>");
      this.data.forEach(function(element, index) {
        this.cellTemplate(true)
          .text(this.rowLabels[index])
          .appendTo($("<tr></tr>").appendTo($tbody));
      }.bind(this));
      return $table.append($tbody);
    };

    FlexTable.prototype.cellTemplate = function(th) {
      return $(th ? "<th></th>" : "<td></td>");
    };

    FlexTable.prototype.buildTable = function(table, column) {
      var $table = this.tableTemplate();
      for(var i = 0, len = table.columns.length; i < len; i++, column++) {
        this.cellTemplate(true)
          .text(this.columnLabels[column])
          .appendTo($table.find("thead tr"));
        for(var j = 0, lenj = this.data.length; j < lenj; j++) {
          this.cellTemplate()
            .text(this.data[j][table.columns[i]])
            .appendTo($table.find("tbody tr").eq(j));
        }
      }

      return $table;
    };

    FlexTable.prototype.restructure = function() {
      var tables = this.possibleTables();

      if(this.sameTablesAsBefore(tables)) {
        return;
      }

      this.clearExistingTables();

      for(var i = 0, column = 0, len = tables.length; i < len; column += tables[i++].columns.length) {
        var $table = this.buildTable(tables[i], column);
        tables[i].$el = $table;
        $(".tables").append($table);
      }

      this.tables = tables;
    };

    $(function() {
      FlexTable(".tables table:first", window);
    });
    * {
      margin: 0;
      padding: 0;
    }

    body {
      padding: 10px 20px;
    }

    table {
      border-collapse: collapse;
    }

    table + table {
      margin-top: 15px;
    }


    table th,
    table td {
      white-space: nowrap;
      border: 1px solid #ccc;
      padding: 5px 10px;
      text-align: left;
    }

    table tr th:first-of-type {
      border: 0;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML:

    <div class="tables">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th></th>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
          </tr>
          <tr>
            <th></th>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
          </tr>
          <tr>
            <th></th>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
          </tr>
          <tr>
            <th></th>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
          </tr>
          <tr>
            <th></th>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$372,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012/08/06</td>
            <td>$137,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>2010/10/14</td>
            <td>$327,900</td>
          </tr>
          <tr>
            <th></th>
            <td>Colleen Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009/09/15</td>
            <td>$205,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2008/12/13</td>
            <td>$103,600</td>
          </tr>
          <tr>
            <th></th>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>2008/12/19</td>
            <td>$90,560</td>
          </tr>
          <tr>
            <th></th>
            <td>Quinn Flynn</td>
            <td>Support Lead</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2013/03/03</td>
            <td>$342,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Charde Marshall</td>
            <td>Regional Director</td>
            <td>San Francisco</td>
            <td>36</td>
            <td>2008/10/16</td>
            <td>$470,600</td>
          </tr>
          <tr>
            <th></th>
            <td>Haley Kennedy</td>
            <td>Senior Marketing Designer</td>
            <td>London</td>
            <td>43</td>
            <td>2012/12/18</td>
            <td>$313,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Tatyana Fitzpatrick</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>19</td>
            <td>2010/03/17</td>
            <td>$385,750</td>
          </tr>
          <tr>
            <th></th>
            <td>Michael Silva</td>
            <td>Marketing Designer</td>
            <td>London</td>
            <td>66</td>
            <td>2012/11/27</td>
            <td>$198,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Paul Byrd</td>
            <td>Chief Financial Officer (CFO)</td>
            <td>New York</td>
            <td>64</td>
            <td>2010/06/09</td>
            <td>$725,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Gloria Little</td>
            <td>Systems Administrator</td>
            <td>New York</td>
            <td>59</td>
            <td>2009/04/10</td>
            <td>$237,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Bradley Greer</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
            <td>2012/10/13</td>
            <td>$132,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Dai Rios</td>
            <td>Personnel Lead</td>
            <td>Edinburgh</td>
            <td>35</td>
            <td>2012/09/26</td>
            <td>$217,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Jenette Caldwell</td>
            <td>Development Lead</td>
            <td>New York</td>
            <td>30</td>
            <td>2011/09/03</td>
            <td>$345,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Yuri Berry</td>
            <td>Chief Marketing Officer (CMO)</td>
            <td>New York</td>
            <td>40</td>
            <td>2009/06/25</td>
            <td>$675,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Caesar Vance</td>
            <td>Pre-Sales Support</td>
            <td>New York</td>
            <td>21</td>
            <td>2011/12/12</td>
            <td>$106,450</td>
          </tr>
          <tr>
            <th></th>
            <td>Doris Wilder</td>
            <td>Sales Assistant</td>
            <td>Sidney</td>
            <td>23</td>
            <td>2010/09/20</td>
            <td>$85,600</td>
          </tr>
          <tr>
            <th></th>
            <td>Angelica Ramos</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>London</td>
            <td>47</td>
            <td>2009/10/09</td>
            <td>$1,200,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Gavin Joyce</td>
            <td>Developer</td>
            <td>Edinburgh</td>
            <td>42</td>
            <td>2010/12/22</td>
            <td>$92,575</td>
          </tr>
          <tr>
            <th></th>
            <td>Jennifer Chang</td>
            <td>Regional Director</td>
            <td>Singapore</td>
            <td>28</td>
            <td>2010/11/14</td>
            <td>$357,650</td>
          </tr>
          <tr>
            <th></th>
            <td>Brenden Wagner</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>28</td>
            <td>2011/06/07</td>
            <td>$206,850</td>
          </tr>
          <tr>
            <th></th>
            <td>Fiona Green</td>
            <td>Chief Operating Officer (COO)</td>
            <td>San Francisco</td>
            <td>48</td>
            <td>2010/03/11</td>
            <td>$850,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Shou Itou</td>
            <td>Regional Marketing</td>
            <td>Tokyo</td>
            <td>20</td>
            <td>2011/08/14</td>
            <td>$163,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Michelle House</td>
            <td>Integration Specialist</td>
            <td>Sidney</td>
            <td>37</td>
            <td>2011/06/02</td>
            <td>$95,400</td>
          </tr>
          <tr>
            <th></th>
            <td>Suki Burks</td>
            <td>Developer</td>
            <td>London</td>
            <td>53</td>
            <td>2009/10/22</td>
            <td>$114,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Prescott Bartlett</td>
            <td>Technical Author</td>
            <td>London</td>
            <td>27</td>
            <td>2011/05/07</td>
            <td>$145,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Gavin Cortez</td>
            <td>Team Leader</td>
            <td>San Francisco</td>
            <td>22</td>
            <td>2008/10/26</td>
            <td>$235,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Martena Mccray</td>
            <td>Post-Sales support</td>
            <td>Edinburgh</td>
            <td>46</td>
            <td>2011/03/09</td>
            <td>$324,050</td>
          </tr>
          <tr>
            <th></th>
            <td>Unity Butler</td>
            <td>Marketing Designer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/12/09</td>
            <td>$85,675</td>
          </tr>
          <tr>
            <th></th>
            <td>Howard Hatfield</td>
            <td>Office Manager</td>
            <td>San Francisco</td>
            <td>51</td>
            <td>2008/12/16</td>
            <td>$164,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Hope Fuentes</td>
            <td>Secretary</td>
            <td>San Francisco</td>
            <td>41</td>
            <td>2010/02/12</td>
            <td>$109,850</td>
          </tr>
          <tr>
            <th></th>
            <td>Vivian Harrell</td>
            <td>Financial Controller</td>
            <td>San Francisco</td>
            <td>62</td>
            <td>2009/02/14</td>
            <td>$452,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Timothy Mooney</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>37</td>
            <td>2008/12/11</td>
            <td>$136,200</td>
          </tr>
          <tr>
            <th></th>
            <td>Jackson Bradshaw</td>
            <td>Director</td>
            <td>New York</td>
            <td>65</td>
            <td>2008/09/26</td>
            <td>$645,750</td>
          </tr>
          <tr>
            <th></th>
            <td>Olivia Liang</td>
            <td>Support Engineer</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2011/02/03</td>
            <td>$234,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Bruno Nash</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>38</td>
            <td>2011/05/03</td>
            <td>$163,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Sakura Yamamoto</td>
            <td>Support Engineer</td>
            <td>Tokyo</td>
            <td>37</td>
            <td>2009/08/19</td>
            <td>$139,575</td>
          </tr>
          <tr>
            <th></th>
            <td>Thor Walton</td>
            <td>Developer</td>
            <td>New York</td>
            <td>61</td>
            <td>2013/08/11</td>
            <td>$98,540</td>
          </tr>
          <tr>
            <th></th>
            <td>Finn Camacho</td>
            <td>Support Engineer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/07/07</td>
            <td>$87,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Serge Baldwin</td>
            <td>Data Coordinator</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2012/04/09</td>
            <td>$138,575</td>
          </tr>
          <tr>
            <th></th>
            <td>Zenaida Frank</td>
            <td>Software Engineer</td>
            <td>New York</td>
            <td>63</td>
            <td>2010/01/04</td>
            <td>$125,250</td>
          </tr>
          <tr>
            <th></th>
            <td>Zorita Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012/06/01</td>
            <td>$115,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Jennifer Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>2013/02/01</td>
            <td>$75,650</td>
          </tr>
          <tr>
            <th></th>
            <td>Cara Stevens</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011/12/06</td>
            <td>$145,600</td>
          </tr>
          <tr>
            <th></th>
            <td>Hermione Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>2011/03/21</td>
            <td>$356,250</td>
          </tr>
          <tr>
            <th></th>
            <td>Lael Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009/02/27</td>
            <td>$103,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Jonas Alexander</td>
            <td>Developer</td>
            <td>San Francisco</td>
            <td>30</td>
            <td>2010/07/14</td>
            <td>$86,500</td>
          </tr>
          <tr>
            <th></th>
            <td>Shad Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>2008/11/13</td>
            <td>$183,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Michael Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
            <td>2011/06/27</td>
            <td>$183,000</td>
          </tr>
          <tr>
            <th></th>
            <td>Donna Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
          </tr>
        </tbody>
      </table>
    </div>

哇！你太厉害了！我没想到这么多的JavaScript，但它运行得非常好。 - Sten Wessel
这是一个有趣的问题，我很喜欢解决它。干杯。 - DRD
0
如果您只使用一个表格，那么我怀疑您的规格无法在不使用JavaScript基本重构HTML的情况下实现。在我看来，后者并不是最好的选择。如果您愿意从一开始就调整标记，则可以仅使用CSS实现您正在寻找的功能。
这里只是一个例子：http://jsfiddle.net/ktrz74sm/。（调整屏幕大小以查看效果）。
HTML:
<div id = "wrapper">
    <table>
        <tr>
            <td></td>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <tr>
            <td>Row 1</td>
            <td>(1, 1)</td>
            <td>(1, 2)</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>(2, 1)</td>
            <td>(2, 2)</td>
        </tr>
    </table>
    <table>
        <tr>
            <td></td>
            <td>Column 3</td>
            <td>Column 4</td>
        </tr>
        <tr>
            <td>Row 1</td>
            <td>(1, 3)</td>
            <td>(1, 4)</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>(2, 3)</td>
            <td>(2, 4)</td>
        </tr>
    </table>
</div>

CSS：

table td {
    text-align: center;
}

@media screen and (min-width: 400px) {
    table {
        display: inline-table;    
    }

    table:nth-of-type(2) td:first-of-type {
        display: none;    
    }   
}

这里有一个使用计数器来消除命名行和列的解决方案：http://jsfiddle.net/nm5bybf2/。
HTML：
<div id = "wrapper">
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>(1, 1)</td>
            <td>(1, 2)</td>
        </tr>
        <tr>
            <td></td>
            <td>(2, 1)</td>
            <td>(2, 2)</td>
        </tr>
    </table>
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>(1, 3)</td>
            <td>(1, 4)</td>
        </tr>
        <tr>
            <td></td>
            <td>(2, 3)</td>
            <td>(2, 4)</td>
        </tr>
    </table>
</div>

CSS：

body {
    counter-reset: column-counter;
}   

table td {
    text-align: center;
}

table {
    counter-reset: row-counter;
}

table tr:nth-of-type(n + 2) td:first-of-type:before {
    counter-increment: row-counter;
    content: "Row " counter(row-counter);
}

table tr:first-of-type td:nth-of-type(n + 2):before {
    counter-increment: column-counter;
    content: "Column " counter(column-counter);
}

@media screen and (min-width: 400px) {
    table {
        display: inline-table;
    }

    table:nth-of-type(2) td:first-of-type {
        display: none;    
    }
}
不错的解决方案，但不是我要找的。我需要一个响应式的解决方案，根据视口宽度来分割表格，而不一定是在第二列之后。 - Sten Wessel
1
在这种情况下，只需使用JavaScript重新生成表格。 - DRD
你能举个用JavaScript实现的例子吗？ - Sten Wessel
0

基本上，您想要创建一个响应式表格，而不会让不适合视图空间的列被屏幕边缘截断，对吗？

如果是这样，为什么不只是创建两个并排的表格呢？让我解释一下。

事实上，就在上周，我为我们公司的客户寻找了解决此问题的方法。他想在网站上放置一个9x9的表格，这并不是什么大问题，但需要它具有响应式设计。

因此，这就是我想出来的方法。

我创建了两个并排的表格。第一个表格只包含一列，有9行。然后，在其右侧立即创建第二个表格，该表格具有8列和9行。我将两个表格都设置为固定高度，以使它们正确对齐。接下来，使用Bootstrap的响应式表格类，并将其应用于要滚动的大表格。使用CSS媒体查询来使用max-width更改表格的宽度（并相应地设置媒体查询以适应不同页面宽度的表格）。这使得两个表格看起来像一个表格，但使左侧列（也就是表格）固定。这消除了在显示其余列时重复第一列的需要。

请在移动设备或窄屏幕上查看本页面底部的表格，了解我所说的内容，并查看此设置是否适用于您的用途。这是一个纯CSS驱动的移动友好型表格，具有许多列。

http://www.cleanplanetdetailing.com/test-gtechniq-pricing.html

如果这种方法适用于你想做的事情，并且你想了解更多详细信息，请发表评论，如果需要，我很乐意为你撰写一篇文章。
1
确实是一个很好的解决方案，但我确实需要创建两个表格（用于打印）。如果不是这种情况，我肯定会使用这个技巧。 - Sten Wessel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接