Reputation: 463
Is there any way to align <td>
s in a <tr>
such that each <td>
is on top of one another. I am looking for a responsive workout for a table which cannot be changed to <ul>-<li>
. So for example I have a table:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
Here 1,2 and 3 should come like:
1
2
3
not
1 2 3.
I have tried display:block,
display:flex
, clear: both
and float: none
but no effect. Please let me if know there is a way to do it.
Upvotes: 2
Views: 135
Reputation: 11
in case of table we are not able to break it as td to tr from the css or dependends on nay screen size.
for you case you have to use css table.
like
<div id="table">
<div calss="table-cell">1<div>
<div calss="table-cell">2<div>
<div calss="table-cell">3<div>
</div>
css
#table{
display:table;
}
#table div{
display:table-cell;
}
@media only screen and (max-width: 800px) {
#table{
display:block;
}
#table div{
display:block;
float:none;
}
}
now at desktop or greater the 800px screen it should be display as table
like
1 2 3
and less then 800px screen width it should be display like this;
1
2
3
you are able to extend this media query as you required. i hope your question is Answered. thanks
Upvotes: 1
Reputation: 14378
Is this what you are looking for? http://jsfiddle.net/1w7arzmm/
td{
float:left;
display:block;
clear:left;
}
Upvotes: 0
Reputation: 1236
Does this achieve what you want?
CSS:
@media (max-width: 400px) {
td {
display: block;
clear:left;
}
}
Fiddle here.
Upvotes: 0
Reputation: 1876
To get this type of output
1
2
3
you can add style='float: left;width: 100%;'
for each TD tag.
Upvotes: 0