如何使 html 表响应？答案

【问题标题】：How to make the html table responsive?如何使 html 表响应？
【发布时间】：2017-09-13 19:26:17
【问题描述】：

我使用 Bootstrap div 制作了下表，但它对移动设备没有响应。我使用了 col-xs，但在移动视图中列仍然相互合并。有没有其他方法可以使此代码响应移动设备？

<div class="container" style="color: grey; padding-top: 40px">
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="col-xs-12" style="border-bottom: 1px solid #eee;">

                <div class="col-md-6 col-xs-4">
                    <span>Item</span>
                </div>

                <div class="col-md-1 col-xs-1">
                    <span>Price</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Quantity</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Total</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Delivery Charge</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Discount</span>
                </div>
                <div class="col-md-1 col-xs-1">
                    <span>Subtotal</span>
                </div>
            </div>


         </div>

</div>

    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="col-md-6 col-xs-6">
                <div class="col-md-5 col-xs-5">
                <img src="https://n1.sdlcdn.com/imgs/a/i/0/large/Mboss-Overnighters-SDL963993531-1-2f227.jpg" class="img-responsive">
                </div>
            <div class="col-md-7 col-xs-7 ">
                <h5>Deisy brown Laptop Overnight</h5><br>
                <div class="row">
                    <div class="col-md-12 col-sm-2 ">
                        <h5>
                            <b>Seller Information:</b>
                        </h5>
                    </div>
                    <div class="col-md-12 col-sm-10">
                        <h6>
                            <b>Book Centre</b><br>

                            371 Colvinjh de sihjglva ,<br>
                            vvv Place,<br>
                            Chghhhgg2<br>
                            0123689955<br>
                        </h6>

                    </div>
                </div>
            </div>
            </div>

             <div class="col-md-1 col-xs-1">
            <span>5780</span><br>
        </div>
             <div class="col-md-1 col-xs-1">
            <span>  5780</span>
        </div>
            <div class="col-md-1 col-xs-1">
            <span> 5780</span>
        </div>
            <div class="col-md-1 col-xs-1">
            <span>0%</span>
        </div>
             <div class="col-md-1 col-xs-1">
            <span>575855</span>
        </div>
           <div class="col-md-1 col-xs-1">
            <span>575855</span>
        </div>
       </div>


    </div>

</div>

【问题讨论】：

使用引导程序的表格响应功能。阅读更多here
使用footable fooplugins.github.io/FooTable/index.html，这是让表格响应的最佳方式
代码中的表格在哪里？另外，如果您也使用col-xs-1 和col-md-1，您如何期望它在超小屏幕上显示不同的布局？
您缺少很多“行” div
你可以像codepen.io/geoffyuen/pen/FCBEg这样或者使用引导程序请添加类“table-responsive”像这里w3schools.com/bootstrap/…

标签： html css twitter-bootstrap responsive-design html-table

【解决方案1】：

您可以将<table> 标签包裹在<div class="table-responsive"></div> 中，因为您使用的是bootstrap。就像这样：（使用<table>而不是网格系统（例如col-xs-1等））

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

访问此链接（引导程序）了解更多信息：

[Visit Me]

.. 就是这样！

快乐编码:)

【讨论】：

【解决方案2】：

可以考虑使用以下四个选项来使表格具有响应性。请选择符合您要求的那一款。

挤压：如果列的内容很少，它们可能会水平挤压而在移动屏幕上没有问题，因此不更改布局是一个有效的选项。

垂直滚动：如果布局和内容准确且重要，用户可以向左或向右滚动。这在带有 overflow="auto" 包装器的 CSS 中是微不足道的。

按行折叠：在小屏幕上将每一行拆分为自己的单列迷你表格。将 display:table 切换为 display:block 将导致使用正常的表格标记。

按列折叠：这就是事情变得棘手的地方。您不能使用纯 CSS 中的普通表格标记来做到这一点，因为代码顺序是按行排列的，并且包装器会将其锁定。我们要么必须更改标记，要么开始使用 JavaScript 进行操作。

【讨论】：

【解决方案3】：

最好使用 Bootstrap 响应式表格。链接在这里。这是最可取的链接。我用过很多次。

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_table-responsive&stacked=h

【讨论】：

【解决方案4】：

@temp 很久以前，我使用以下代码使我的表响应。我希望它会帮助你。

/*...............Table Starts....................*/
.table_custom_1 {
    width: 100%;
    border: 1px solid #eee;
    overflow: hidden;
}

.table_custom_1 td {
    display: block;
}

.table_custom_1 th, .table_custom_1 td {
    display: table-cell;
    text-align: left;
}

.table_custom_1, .custom_table {
    width: 100%;
}

.table_custom_1 thead tr th, .custom_table tr th {
    background: #ECECEC none repeat scroll 0 0;
    color: #999999;
    font-family: opensans-Bold;
    font-size: 11px;
    padding: 5px 6px;
}

.table_custom_1 tbody tr td {
    border-bottom: 1px solid #e0e0e0;
    color: #414042;
    font-family: opensans-regular;
    font-size: 12px;
    padding: 8px 6px;
    vertical-align: top;
    word-break: break-all;
}

.table_custom_1 tbody tr td.table_secondary_text {
    font-size: 10px;
    color: #999999;
}

.table_custom_1 tr td:first-child {
    padding-left: 15px;
}

.table_custom_1 tr td:last-child, .table_custom_1 tr th:last-child {
    padding-right: 15px;
}

.table_custom_1 tr.selected td {
    background: #FAFAFA;
}

.table_custom_1 .btn {
    display: inline-block;
}

.table_custom_1 .table_icon i {
    color: #878787;
    font-size: 14px;
    position: relative;
    top: 3px;
}

.table_custom_1 .table_icon:hover, .table_custom_1 .table_icon .table_icon:focus {
    text-decoration: none;
}

.table_custom_1 .badge {
    margin-top: -3px;
    margin-left: 4px;
}

.table_custom_1 thead tr th input {
    font-size: 12px;
}

.table_custom_1 .table_custom_1 {
    border: medium none;
}

.table_custom_1 tbody tr td i.indicator {
    margin-right: 5px;
    font-size: 8px;
}

/*.....................Media Queries starts.........*/
@media (max-width: 700px) {

.table_custom_1 th, .table_custom_1 td {
    display: inherit;
}

.table_custom_1 td:before {
    content: attr(data-th) ": ";
    width: 6.5em;
    display: inline-block;
    color: #b7b7b7;
}

.table_custom_1 {
    border: 0px;
}

.table_custom_1 tr {
    background-color: #fff;
    border: 1px solid #eee;
    display: block;
    margin-bottom: 15px;
    box-shadow: 0 1px 5px -3px rgb(164, 164, 164);
}

.table_custom_1 tr td {
    padding: 4px 10px !important;
}

.table_custom_1 tbody tr td:first-child:before {
    padding-left: 0;
    content: '';
    width: 0;
}

.table_custom_1 tbody tr td:first-child {
    font-family: OpenSans-Semibold;
    color: #217589;
    font-size: 16px;
}

.table_custom_1.checkbox_table thead tr th:first-child {
    display: block;
    padding-left: 15px;
}

.table_custom_1.checkbox_table thead tr th, .table_custom_1 thead {
    display: none;
}

.checkbox_table thead {
    display: block !important;
}
}

@media (max-width:600px) {
.table_custom_1 tr, .table_custom_1 td {
    display: block;
}

.table_custom_1 tbody tr td:first-child {
    color: #217589;
    font-size: 16px;
}

.table_custom_1 thead {
    display: none;
}


}

@media (min-width: 480px) {

.table_custom_1 td:before {
    display: none;
}

.table_custom_1 th:first-child, .table_custom_1 td:first-child {
    padding-left: 15px;
}

.table_custom_1 th:last-child, .table_custom_1 td:last-child {
    padding-right: 0;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
                     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                     <table class="table_custom_1">
                           <thead>
                              <tr>
                                 <th>Name</th>
                                 <th>Age</th>
                                 <th>D.O.B</th>
                                 <th>Location</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <td>Rahul</td>
                                 <td data-th="Age">20</td>
                                 <td data-th="D.O.B">1977</td>
                                 <td data-th="Location">Delhi</td>
                              </tr>
                              <tr>
                                 <td data-th="Name">Vivek</td>
                                 <td data-th="Age">30</td>
                                 <td data-th="D.O.B">1986</td>
                                 <td data-th="Location">Vadodara</td>
                              </tr>
                              <tr>
                                 <td data-th="Name">Sahil</td>
                                 <td data-th="Age">23</td>
                                 <td data-th="D.O.B">1973</td>
                                 <td data-th="Location">J&K</td>
                              </tr>
                           </tbody>
                        </table>
                       
                     </div>
 </div>

【讨论】：

【解决方案5】：

我希望这将有助于使表格具有响应性。

这是fiddle HTML：

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Age</td>
            <td>Gender</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Qasim</td>
            <td>23yrs</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Ali</td>
            <td>19yrs</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>William</td>
            <td>34yrs</td>
            <td>Male</td>
        </tr>
    </tbody>
</table>

CSS：

td{
  width:100px;
}
@media (max-width: 600px) {
    thead {
        display: none;
    }
    tr{
      display:grid;
      border-bottom:1px solid #000000;
    }
    td:nth-of-type(1):before { content: "Name"; }
    td:nth-of-type(2):before { content: "Age"; }
    td:nth-of-type(3):before { content: "Gender"; }

    td:before{
      width:150px;
      float:left;
    }
    td{
      width:300px;
    }
}

【讨论】：

【解决方案6】：

这是我的例子：

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="assets/css/responsive-table.css" type="text/css" />
    <title>Responsive Tables</title>

</head>

<body style="background:#F2F2F2">

        <!-- This is populated dynamically with JQuery since Pseudo elements can't be set in JS-->
        <div id="custom-css"></div>
        <!-- DONT DELETE THIS DIV -->

        <div class="table-container">

            <table>
                <tr>
                    <th>TEAM NAME</th>
                    <th>WINS</th>
                    <th>LOSSES</th>
                    <th>GOALS FOR</th>
                    <th>GOALS DIFFERENCE</th>
                    <th>POINTS</th>
                </tr>
                <tr>
                    <td>Team A</td>
                    <td>26</td>
                    <td>1</td>
                    <td>77</td>
                    <td>+57</td>
                    <td>85</td>
                </tr>
                <tr>
                    <td>Team B</td>
                    <td>27</td>
                    <td>4</td>
                    <td>86</td>
                    <td>+64</td>
                    <td>83</td>
                </tr>
                <tr>
                    <td>Team C</td>
                    <td>22</td>
                    <td>10</td>
                    <td>64</td>
                    <td>+30</td>
                    <td>67</td>
                </tr>
                <tr>
                    <td>Team D</td>
                    <td>20</td>
                    <td>7</td>
                    <td>66</td>
                    <td>+26</td>
                    <td>66</td>
                </tr>
            </table>

        </div><!-- close table container -->

        <div class="table-container" style="margin-top:5em">

            <table>
                <tr>
                  <th>CLUB</th>
                  <th>MANAGER</th>
                  <th>COUNTRY</th>
                </tr>
                <tr>
                  <td>Liverpool</td>
                  <td>Jurgen Klopp</td>
                  <td>England</td>
                </tr>
                <tr>
                  <td>Real Madrid</td>
                  <td>Zinedine Zidane</td>
                  <td>Spain</td>
                </tr>
                <tr>
                  <td>Celtic FC</td>
                  <td>Neil Lennon</td>
                  <td>Scotland</td>
                </tr>
                <tr>
                  <td>Tottenham</td>
                  <td>Jose Mourinho</td>
                  <td>England</td>
                </tr>
                <tr>
                  <td>Atlético Madrid</td>
                  <td>Diego Simeone</td>
                  <td>Spain</td>
                </tr>
                <tr>
                  <td>Inter Milan</td>
                  <td>Antonio Conte</td>
                  <td>Italy</td>
                </tr>
            </table>

        </div><!-- close table container -->

</body>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="assets/js/responsive-table.js"></script>

</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");

.table-container {
  background: #FFFFFF;
  margin: 2% 1.5%;
  padding: 1%;
  color: #555555;
  font-family: 'Roboto';
  font-size: 13px;
  font-weight: 400; 
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; 
}

/* Table Header Cell and Standard Cell */
th,
td {
  text-align: left;
  padding: 8px; 
}

/* Table Headings */
th {
  color: #555555;
  background: #DDD;
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 600; 
}


/* For All Devices Above 600px */
@media only screen and (min-width: 600px) {

  /* Styles the background color off every odd table row */
  tr:nth-child(odd) {
    background: #F2F2F2 ;
  }

}
/* Close Media Query */


/* For All Devices Below 600px */
@media only screen and (max-width: 600px) {

  .container {
    margin: 3.5% 1.5%; 
  }

  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block; 
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px; 
  }

  /* Add Border to make easier to read*/
  tr {
    border: 1px solid #ccc; 
  }

  /* Behave  like a "row" */
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 60%; 
  }

  td:nth-child(1) {
    background: #DDD; 
  }

  /* Now like a table header */
  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap; 
    font-weight: 600;
  }

  /* Hide Table Headings */
  th {
    display: none; 
  }

}

Javascript/Jquery

function responsiveTable(screenSize) {

     // If media query is below 600px
    if (screenSize.matches) {

        // Array to push up CSS styles too
        var stylesArray = [];

        // Getting the amount of tables
        var tableCount = $('table').length;

        // Iterate through each table
        for(a = 1; a <= tableCount; a++) {

            // Target each indivdual table
            var tableClass  = ".table-container:nth-of-type("+(a+1)+") table";

            // Declaring unique table class
            var newTableClass = "table-"+(a);

            // Add Unique Class to each table occurence
            $(tableClass).addClass(newTableClass);

            // Getting Table Headings for Indivdual Classes
            var tableClassHeading = "."+newTableClass +  " th";

             // Count the table headings
            var tableHeadingCount = $(tableClassHeading).length;

            // Iterate through Table Headings
            for(i = 0; i < tableHeadingCount; i++) {

                // Adding the . notation to make it a class to use with JQuery
                var editedClass = "."+newTableClass;

                // Getting the value of the table heading
                var tableHeading = $(editedClass).find("th").eq(i).html();

                // Creating CSS Style and Setting Table Row (Heading) with Table Heading;
                var cssRole = editedClass+' td:nth-of-type('+(i+1)+'):before {content: "'+tableHeading+'"}';

                // Pushing CSS style to Styles Array
                stylesArray.push(cssRole);

            }// close the i for loop


        } //close the a for loop


        // Building the CSS stylesheet
        var styleSheet = "<style> ";

        // Iterate through each style rule
        for(q = 0; q < stylesArray.length; q++) {

            // Setting the CSS Rule
            var indivdualStyleRule = stylesArray[q];

            // Appending the rule to string
            styleSheet += indivdualStyleRule;
        }

        // Finished CSS Style
        var finishedStyleSheet = styleSheet + " </style>";

        // Add Style to HTML
        $('#custom-css').append(finishedStyleSheet);


    }// close if for media query

    else {

        // Clear all styles that were created
        $('#custom-css').empty();

    }// close else

}// close responiveTable function


// Set the responsive width for tables. Must match value set in css
var smallScreenSize = window.matchMedia("(max-width: 600px)");

// Call listener responsiveTable function at run time
responsiveTable(smallScreenSize); 

// Attach listener function on state changes
smallScreenSize.addListener(responsiveTable);

我的代码：Preview

Github：Code

【讨论】：