2

我有这张表，第一行有三个单元格。我正在尝试创建一个设计，如果没有空间，它将降低最后一个单元格。所以像上面的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; 
    }
}
4

4 回答 4

1

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

于 2013-09-12T19:55:46.250 回答
1

表格不应该用于响应式设计...存储它以使其成为拇指规则：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/

于 2013-09-12T20:06:03.457 回答
1

你可以display像这样改变http://jsfiddle.net/Yr22s/1/

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

于 2013-09-12T20:16:29.480 回答
0

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

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

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

在此处输入图像描述

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

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

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

于 2013-09-12T19:49:31.917 回答