使用 CSS 显示的响应式表格：table-row

Posted 2023-03-05

【中文标题】使用 CSS 显示的响应式表格：table-row

【英文标题】：Responsive table using CSS display: table-row

【发布时间】：2015-03-05 06:04:49

【问题描述】：

我无法将我的表格转换为更具响应性的设计，我在 Google 上尝试了许多资源，但它们都有限且无法按预期工作。我遇到的根本问题是我的表是动态生成的，我不想编辑在 Google 上找到的资源，因此我可以轻松更新它们并且不会过多地混淆代码。

无论如何，我的桌子的设计非常简单。有 X 行的 5 列（取决于从数据库生成的内容）。每当用户调整浏览器的大小时（或当他们使用手机时），我都想更改我的表格，使其也适合较小的屏幕。这方面的一个例子是：

桌面

Header 1 | Header 2 | Header 3
------------------------------
Content  | Content  | Content

电话

Header 1 | Content
------------------
Header 2 | Content
------------------
Header 3 | Content

我试图通过使用display: table-row 在屏幕达到一定宽度时使用 CSS 来实现这一点，我创建了this jsfiddle 来显示我当前的代码。然而，目前th 和td 垂直显示在彼此上方/下方，而不是像我打算做的那样彼此相邻。我尝试使用 float: left 和 float: right 但这不起作用（参见 jsfiddle）。任何人都可以帮助我使用 CSS 完成我想要的吗？如果这是不可能的，我将如何使用 javascript 来解决这个问题，记住我的表格不会在页面加载时全部生成（有些是动态添加到页面中的）？

【问题讨论】：

从引导程序中查看容器 css 类。这会带你到某个地方。

这是一篇来自css-tricks.com的关于响应式表格的好文章。

@Vucko 我已经读过那个了，但是他们提供了我不想实施的解决方案，因为他们没有提供我需要的解决方案（例如饼图），并且由于我的表格是动态生成的，因此只有与我的情况相近的解决方案对我不起作用。

【参考方案1】：

如何针对不同的屏幕宽度调整table 定义。这也可以防止浮动元素的任何意外副作用。

Resizable Fiddle

.table 
  display: table;
  width: 100%;

.row 
  display: table-row;

.cell 
  display: table-cell;

@media screen and (max-width: 750px) 
  .cell 
    display: block;
  
  .row 
    display: table-cell;
    width: 50%;
  

<div class="table">
  <div class="row">
    <div class="cell">Head #1</div>
    <div class="cell">Head #2</div>
    <div class="cell">Head #3</div>
    <div class="cell">Head #4</div>
  </div>
  <div class="row">
    <div class="cell">Content #1</div>
    <div class="cell">Content #2</div>
    <div class="cell">Content #3</div>
    <div class="cell">Content #4</div>
  </div>
</div>

【参考方案2】：

我已经分叉了你的小提琴。我就是这样解决的：

html

<div class="row">
    <span>Head #1</span>
    <span>Head #2</span>
    <span>Head #3</span>
    <span>Head #4</span>
</div>
<div class="row">
    <span>Content #1</span>
    <span>Content #2</span>
    <span>Content #3</span>
    <span>Content #4</span>
</div>

CSS

.row

    display: table-row;

.row > *

    display: table-cell;


@media screen and (max-width: 750px) 
    .row
    
        display: block;
        float: left;
    
    .row > *
    
        display: block;
    

【讨论】：

嗨 Joshua，根据您对这个问题的回答，您是否有机会对另一个类似问题有更好的回答：***.com/questions/29801114/…

【参考方案3】：

使用thead 和tbody 元素，您可以这样尝试：

http://jsfiddle.net/uzsw7s4o/

CSS

@media screen and (max-width: 750px) 
    tbody, thead  float: left; 
    thead  min-width: 120px 
    td,th  display: block 

【讨论】：

看起来很有希望，但是如果将浏览器的大小调整到 100 像素以下，有没有办法防止表格完全垂直？目前它在一定范围内工作，但仍然崩溃到我在我的例子中。

您可以为表格元素添加一个最小宽度或为thead 和tbody 设置一个相对宽度（例如，每个50%）

你好！我实施了您的解决方案，我想知道是否也可以为所有 td 元素设置一个 thead，因为我们有时有超过 1 行。我知道thead 本身是不可能的，但也许有字幕？或者最好的方法是什么？

不确定您的目标，但您可能在同一个表中有许多 tbody 元素