使用 CSS 将 HTML 表格列组合在一起

Question

我有以下 HTML 表格

<table>

  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
    <td>Cell 1.3</td>
  </tr>

  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
    <td>Cell 2.3</td>
  </tr>

  <tr>
    <td>Cell 3.1</td>
    <td>Cell 3.2</td>
    <td>Cell 3.3</td>
  </tr>

</table>

上表自然显示如下

----------------------------------
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
----------------------------------
| Cell 2.1 | Cell 2.2 | Cell 2.3 |
----------------------------------
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
----------------------------------

所以我喜欢做的是创建一个响应式设计，这样当网页在桌面屏幕上查看时，表格显示如上，但是当网页在手机屏幕上查看时，表格如下图所示

------------
| Cell 1.1 |
------------
| Cell 2.1 |
------------
| Cell 3.1 |
------------

------------
| Cell 1.2 |
------------
| Cell 2.2 |
------------
| Cell 3.3 |
------------

------------
| Cell 1.3 |
------------
| Cell 2.3 |
------------
| Cell 3.3 |
------------

我喜欢只使用 CSS 来实现上述目标。它应该看起来像这样

/* CSS RULES FORE MOBILE */

/* Add here CSS code that makes the table traverse vertically */



@media screen and (min-width: 1280) {

    /* CSS RULES FORE DESKTOP */

    /* Rest CSS rules, to display the table for desktop */
}

我不知道该怎么做，或者完全不知道如何处理这件事。感谢您的帮助。谢谢。

Answer 1

如果您知道列数，您可以这样做：

table {
  display:grid;
  grid-template-columns:auto 1fr;
}
tbody, tr {
  display:contents;
}
td:nth-child(1) {
  order:1
}
td:nth-child(2) {
  order:2
}
td:nth-child(3) {
  order:3
}
tr:last-child td {
  margin-bottom:10px;
}
td {
  grid-column:1;
  border:1px solid black;
}

<table>

  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
    <td>Cell 1.3</td>
  </tr>

  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
    <td>Cell 2.3</td>
  </tr>

  <tr>
    <td>Cell 3.1</td>
    <td>Cell 3.2</td>
    <td>Cell 3.3</td>
  </tr>

</table>

Answer 2

我编写了一些代码，允许用户在您的页面上拥有多个响应式表格。从您描述的方式来看，您希望响应式视图看起来如何，我认为这可能是您的解决方案。虽然它不是纯粹的 CSS，但它也使用 JQuery。我试图让它尽可能简单，这样人们就可以下载和使用 CSS 和 JS 文件。

HTML

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

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 = 0; 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);

这是一个有效的example

这里是来源code