CODEWITHSUNDEEP
htmlcss
gaurav oberoi
gaurav oberoi

Reputation: 463

<td>'s aligned vertically for responsive

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

Answers (4)

Rashid
Rashid

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

Akshay
Akshay

Reputation: 14378

Is this what you are looking for? http://jsfiddle.net/1w7arzmm/

td{
float:left;
display:block;
clear:left;
}

Upvotes: 0

flowstoneknight
flowstoneknight

Reputation: 1236

Does this achieve what you want?

CSS:

@media (max-width: 400px) {
    td {
        display: block;
        clear:left;
    }
}

Fiddle here.

Upvotes: 0

coDe murDerer
coDe murDerer

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

Related Questions