表格响应式布局 CSS / HTML

Question

我还没有找到确切的例子，所以如果你有，请给我一个链接。我在上一个问题中也犯了一个错误，所以我给出了正确的答案，但我仍然需要帮助！

我想让 HTML 中的表格响应如下 - 是否可以使用 CSS？

<table>
   <thead>
      <tr>
         <td>HEADER Data 1</td>
         <td>HEADER Data 2</td>
         <td>HEADER Data 3</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1 Data 1</td>
         <td>Row 1 Data 2</td>
         <td>Row 1 Data 3</td>
      </tr>
      <tr>
         <td>Row 2 Data 1</td>
         <td>Row 2 Data 2</td>
         <td>Row 2 Data 3</td>
      </tr>
      <tr>
         <td>Row 3 Data 1</td>
         <td>Row 3 Data 2</td>
         <td>Row 3 Data 3</td>
      </tr>
   </tbody>
</table>

在小屏幕上，我希望表格具有响应性，以便按如下方式放置数据：

来自：

HEADER Data 1    HEADER Data 2   HEADER Data 3
Row 1 Data 1     Row 1 Data 2    Row 1 Data 3
Row 2 Data 1     Row 2 Data 2    Row 2 Data 3
Row 3 Data 1     Row 3 Data 2    Row 3 Data 3

对此：

HEADER Data 1
Row 1 Data 1
Row 2 Data 1
Row 3 Data 1

HEADER Data 2
Row 1 Data 2
Row 2 Data 2
Row 3 Data 2

HEADER Data 3
Row 1 Data 3
Row 2 Data 3
Row 3 Data 3

Answer 1

使用 CSS 无法将表格拆分为其列的块。因此需要Javascript。像这样：

<body>
<h1>Test</h1>

<table id="responsiveTable">
   <thead>
      <tr>
         <td>HEADER Data 1</td>
         <td>HEADER Data 2</td>
         <td>HEADER Data 3</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1 Data 1</td>
         <td>Row 1 Data 2</td>
         <td>Row 1 Data 3</td>
      </tr>
      <tr>
         <td>Row 2 Data 1</td>
         <td>Row 2 Data 2</td>
         <td>Row 2 Data 3</td>
      </tr>
      <tr>
         <td>Row 3 Data 1</td>
         <td>Row 3 Data 2</td>
         <td>Row 3 Data 3</td>
      </tr>
   </tbody>
</table>

<hr>

<script>
var table = document.getElementById("responsiveTable");

var changeTable = function(e) {
 if (document.body.clientWidth < 400) {
  if (document.getElementById("responsiveTable")) {
   var tr = null;
   var td = null;
   var cols = [];

   for ( i=0; i<table.getElementsByTagName("tr").length; i++ ) {
    tr = table.getElementsByTagName("tr")[i];
    for ( j=0; j<tr.getElementsByTagName("td").length; j++) {
     td = tr.getElementsByTagName("td")[j];
     if(cols[j]==null) cols[j]=[];
     cols[j][i] = td;
    }
   }

   var divWrapper = document.createElement("div");
   divWrapper.id = "divWrapper";
   var divCol = null;
   var divData = null;

   for ( j=0; j<cols.length; j++ ) {
    divCol = document.createElement("div");
    for ( i=0; i<cols[j].length; i++ ) {
     divData = document.createElement("div");
     divData.innerHTML = cols[j][i].innerHTML;
     divCol.appendChild(divData);
    }
    divWrapper.appendChild(divCol);
   }
   document.body.replaceChild(divWrapper, table);
  }
 } else if (document.getElementById("divWrapper")) {
   document.body.replaceChild(table, document.getElementById("divWrapper"));
 }
}

window.addEventListener("load", changeTable, true);
window.addEventListener("resize", changeTable, true);

</script>

</body>

小提琴：http://jsfiddle.net/ch3sqx8j/

问候

阿克塞尔