堆栈在CSS表整列

是否有CSS的方式堆叠整列，所以如果我的桌面上表是以下几点：堆栈在CSS表整列

| H1 | H2 | H3 | H4 | 
| A1 | B1 | C1 | D1 | 
| A2 | B2 | C2 | D2 |

它会成为这个移动：

| H1 | 
| A1 | 
| A2 | 
| H2 | 
| B1 | 
| B2 | 
| H3 | 
| C1 | 
| C2 | 
| H4 | 
| D1 | 
| D2 |

我希望这是有道理的

这里是我的HTML结构：

<table class="rds-table"> 
 
    <tr> 
 
     <th>H1</th> 
 
\t \t <th>H2</th> 
 
\t \t <th>H3</th> 
 
\t \t <th>H4</th> 
 
\t </tr> 
 
    <tr> 
 
     <td>A1</td> 
 
     <td>B1</td> 
 
     <td>C1</td> 
 
     <td>D1</td> 
 
    </tr> 
 
\t <tr> 
 
\t \t <td>A2</td> 
 
\t \t <td>B2</td> 
 
\t \t <td>C2</td> 
 
\t  <td>D2</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>A3</td> 
 
\t \t <td>B3</td> 
 
\t \t <td>C3</td> 
 
\t \t <td>D3</td> 
 
\t </tr> 
 
</table>

来源

2015-03-02 Luca

您是否在使用'tr'标签等标准表格标记？ – 2015-03-02 18:53:08

是的，我会做一个JS小提琴1秒。 – Luca 2015-03-02 18:54:18

你可能需要一些聪明的jQuery/JavaScript ... – 2015-03-02 18:56:36

.column { 
    float:left; 
} 

.element { 
    display: block; 
    float:left; 
    clear:both; 
} 

@media (max-width: 980px) { 
    .column { 
     clear:both; 
    } 
} 


<div class="rds-table"> 
    <div class="column"> 
     <div class="element">Header One</div> 
     <div class="element">Data One</div> 
     <div class="element">Data One</div> 
    </div> 
    <div class="column"> 
     <div class="element">Header Two</div> 
     <div class="element">Data Two</div> 
     <div class="element">Data Two</div> 
    </div> 
</div>

媒体查询将寻找的980或更低的屏幕尺寸。编辑：现在有更新的代码，这将使用div而不是表格元素。

来源

2015-03-02 19:06:16

如果有头文件，这个解决方案实际上并不奏效，对吧？ – im1dermike 2015-03-02 19:16:01

另外，'display：block'是否必要？似乎不是。 – im1dermike 2015-03-02 19:17:05

这是堆叠不正确 – Luca 2015-03-02 19:22:00

在你的CSS中使用@media来查询屏幕大小并组织flex布局中的内容。

$(window).on('resize', function() { 
 
    myfunction(); 
 
}); 
 
$(document).ready(function() { 
 
    $(window).trigger('resize'); 
 
}); 
 

 
function myfunction() { 
 
    if (window.matchMedia('(max-width: 880px)').matches) { 
 
    if (!$(".th").length) { 
 
     $(".rds-table tbody").children().each(function(index) { 
 
     console.log(index + ": " + $(this).prop("tagName")); 
 
     if (index > 0) { //si nos brincamos el header y vamos a los demás tr 
 

 
      $(this).prepend('<td class="th">' + $(".rds-table tr th:nth-child(" + index + ")").text() + '</td>'); 
 
      $(".rds-table tr th:nth-child(" + index + ")").addClass("invisible"); 
 

 
     } 
 
     }); 
 
    } 
 
    } else { 
 

 
    /*  $(".th").addClass("invisible");*/ 
 
    $(".th").remove(); 
 
    $(".invisible").removeClass("invisible"); 
 
    } 
 
}

@media (max-width: 880px) { 
 

 
     td { 
 

 
     display: flex; 
 

 
     } 
 

 
    } 
 

 
    .th { 
 

 
     color: blue; 
 

 
    } 
 

 
    .invisible { 
 

 
     display: none; 
 

 
    } 
 

 
    th, 
 

 
    td { 
 

 
     border: 1px; 
 

 
     border-style: dashed; 
 

 
     border-color: gray; 
 

 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="rds-table"> 
 
    <tr> 
 
    <th>Header One</th> 
 
    <th>Header Two</th> 
 
    <th>Header Three</th> 
 
    <th>Header Four</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Data One H1</td> 
 
    <td>Data Two H1</td> 
 
    <td>Data Three H1</td> 
 
    <td>Data Four H1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Data One H2</td> 
 
    <td>Data Two H2</td> 
 
    <td>Data Three H2</td> 
 
    <td>Data Four H2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Data One H3</td> 
 
    <td>Data Two H3</td> 
 
    <td>Data Three H3</td> 
 
    <td>Data Four H3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Data One H4</td> 
 
    <td>Data Two H4</td> 
 
    <td>Data Three H4</td> 
 
    <td>Data Four H4</td> 
 
    </tr> 
 
</table>

正如你所欣赏的边界是完美的，当你使用jQuery，但是当你使用CSS只有它才能创造细微的错误（对比小提琴My fiddle和Brendan's fiddle）。

来源

2015-03-02 23:13:02

堆栈在CSS表整列

回答

相关问题