Responsive table design by cell - html

Question

I have this table with three cells in the first row. I'm trying to create a design that will bring down the last cell if there is no space. So something like 2 on top, 1 below. And as the window gets even small 1 on each row. I'm having trouble finding anything like this.
I was able to get a responsive design to stack all cells on top of each other depending on size but if I could find a better solution that would be nicer.
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

That's not possible. But even if it were doable, a more elegant solution would be to stack 3 divs side-by-side and responsively put them one below the other. Check this Bootstrap example for something quite similar to what you want.

Answer 2

Tables should not be used for responsive design...
Store this to make it a thumb rule : http://shouldiusetablesforlayout.com/
You can try something like this to make DIV structure and make that responsive:
<div id="container">
<div id="col_left"> something here</div>
<div id="col_mid"> something here </div>
<div id="col_mid"> 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;
}
you can refer this http://jsfiddle.net/aasthatuteja/awvck/

Answer 3

You can change display like this http://jsfiddle.net/Yr22s/1/
BUT, it effectively changes your table to be div

Answer 4

sorry i dont think this is possible ..actually its not posiible...you cant break a tabular design...
what does a row mean???its a collection of cells...so one row will always contain a particular number of cells...you cant change number of cells in a row depending on screen width..its fixed...
for example consider this table in image
now if your screen width gets too small to accommodate its total width then it will overflow horizontally and horizontal scroll bar will be introduced...and if one cell gets too tall then row size will take the height of tallest cell and rest of the cell will be aligned vertically middle by default...you cant change this property dynamically depending on screen size
what you can do is ..define there width using %..so it wil grow or shrink according to screen width...
this is one reason(actually there are many) why you should avoid tabular design..use container(<div>) to design your website