Question

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

Answer 1

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

Answer 2

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