单元格响应式表格设计答案

【问题标题】：Responsive table design by cell单元格响应式表格设计
【发布时间】：2013-09-17 08:26:01
【问题描述】：

我有这张表，第一行有三个单元格。我正在尝试创建一个设计，如果没有空间，它将降低最后一个单元格。所以像上面的2，下面的1。随着窗口在每行上变得更小 1。我很难找到这样的东西。

我能够获得响应式设计，根据大小将所有单元堆叠在一起，但如果我能找到更好的解决方案，那就更好了。

HTML：

<table id="dashboard" cellpadding="0" cellspacing="0">
    <tr>
        <td id="TopLeft"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>
        <td id="TopRight"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>
        <td id="BottomLeft"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>
    </tr>
</table>

CSS：

#dashboard{
    border-collapse: separate;
    border-spacing: 5px 5px;
    border: 5px solid red;
    background-color: blue;  
}

div.chartLoadingOverlay{
    font-style:italic;
    color:gray;
    border:1px silver solid;
    background-color:#F5F5F5;
    line-height:250px;
    height:250px;
    width:500px;    
    text-align:center;  
    margin:2px;
}

@media only screen and (max-width: 1000px){
    /* Force table to not be like tables anymore */
    #dashboard table{ 
         width: 100%; 
         border-collapse: collapse; 
         border-spacing: 0;
         display: block; 
         position: relative; 
         width: 100%;
    }

    #dashboard tbody { 
        /*display: block;*/
        width: auto; position: relative; 
        overflow-x: auto; 
        white-space: nowrap; 
    }

    #dashboard tbody tr { 
        display: inline-block; 
        vertical-align: top; 
    }   

    #dashboard td { 
        display: block; 
    }
}

【问题讨论】：

您对浏览器有什么要求？另外，您的数据表格是表格吗，这就是为什么它需要在表格中（我问，因为如果不是，这更容易，和/或可以反向完成）
不，我的数据包含 Google API 图表。我使用表格是因为它是我操纵图表外观和位置的最简单方法。解决方案需要使用 IE8+

标签： html css responsive-design html-table

【解决方案1】：

您可以像这样更改display http://jsfiddle.net/Yr22s/1/

但是，它有效地将您的表格更改为div

【讨论】：

【解决方案2】：

对不起，我认为这是不可能的......实际上它是不可能的......你不能破坏表格设计......

一行是什么意思???它是一组单元格...所以一行将始终包含特定数量的单元格...您不能根据屏幕宽度更改一行中的单元格数量...它是固定的...

例如考虑这张图片中的表格

现在，如果您的屏幕宽度太小而无法容纳其总宽度，那么它将水平溢出并引入水平滚动条......如果一个单元格变得太高，那么行大小将采用最高单元格的高度并休息默认情况下，单元格将垂直居中对齐...您不能根据屏幕大小动态更改此属性

你可以做的是......使用%..定义那里的宽度......所以它会根据屏幕宽度增长或缩小......

这是您应该避免表格设计的原因之一（实际上有很多）。使用容器（<div>）来设计您的网站

【讨论】：

我不反对使用 div 切换一切。如果我没记错的话，如果窗口大小正确减小，内联 div 会自动下降。我想我会稍微重写一下。谢谢你的解释。
如果我的回答解决了你的目的，那么请接受回答

【解决方案3】：

表格不应用于响应式设计... 存储它以使其成为经验法则：http://shouldiusetablesforlayout.com/

您可以尝试这样的方法来制作 DIV 结构并使其具有响应性：

<div id="container">
    <div id="col_left">&nbsp; something here</div>
    <div id="col_mid">&nbsp; something here </div>
    <div id="col_mid">&nbsp; something here</div>
    <div style="clear: both"></div>
</div>

CSS：

#container
{
width: 100 %;
clear: both;
border: 1px solid #CCC;
}
#col_left
{
float: left;
width: 20%;
margin: 0 5px 0 0;
border: 1px solid #CCC;
}
#col_mid
{
float: left;
width: 20%
margin: 0 5px 0 0;
border: 1px solid #CCC;
}
#col_right
{
float: right;
width; 35%;
margin: 5px;
border: 1px solid #CCC;
}

你可以参考这个http://jsfiddle.net/aasthatuteja/awvck/

【讨论】：

shouldiusetablesforlayout.com?不......除非您需要发送电子邮件。那么你应该使用表格，因为电子邮件停留在 90 年代。

【解决方案4】：

这是不可能的。但即使它是可行的，一个更优雅的解决方案是并排堆叠 3 个 div 并响应地将它们放在另一个下方。检查此Bootstrap example 是否与您想要的非常相似。

【讨论】：

是的，我想我会把事情转移到 div 上。谢谢。