在 CSS 中为表格堆叠整列

Posted 2023-03-05

【中文标题】在 CSS 中为表格堆叠整列

【英文标题】：Stack entire column for table in CSS

【发布时间】：2015-05-03 05:45:14

【问题描述】：

有没有办法在 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>
		<th>H2</th>
		<th>H3</th>
		<th>H4</th>
	</tr>
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
    </tr>
	<tr>
		<td>A2</td>
		<td>B2</td>
		<td>C2</td>
	    <td>D2</td>
	</tr>
	<tr>
		<td>A3</td>
		<td>B3</td>
		<td>C3</td>
		<td>D3</td>
	</tr>
</table>

【问题讨论】：

您是否使用带有tr 标签等的标准表格标记？

是的，我会做一个 JS 小提琴 1 秒。

你可能需要一些聪明的 jQuery/javascript...

试试这个：css-tricks.com/responsive-data-tables

似乎是在div 结构上重写它的最佳方法

【参考方案1】：

在您的 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）。

【参考方案2】：

.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 而不是表格元素。

【讨论】：

如果有标题，这个解决方案真的不行，对吧？

另外，display: block; 有必要吗？好像没有。

您希望 tr 元素重叠。我认为您拥有的 HTML 不可能做到这一点。

您需要考虑列。 H1、A1、A2 是一列，H1、B2、B3 是另一列。当屏幕正常大小时，列向左浮动，不清除。当屏幕尺寸较小时，列向左浮动，两者都清除。编辑：jsfiddle.net/tgxgvgnx/4 工作链接。使用 .elements 的宽度使其更均匀。还要测试最大宽度，以便您理解它。

我正在尝试这样做，但由于某种原因，我的列在桌面模式下无法拉伸到 100% jsfiddle.net/7sqkgfuh/3