CODEWITHSUNDEEP
javascripthtmldom
JJJ
JJJ

Reputation: 1029

replace <td> with <tr> depending on browser width

So I have a table in html, it has two cells. I would like for these cells, depending on the width of the browser, to be arranged either vertically or horizontally.

I have tried looking for a DOM function to get the job done, but came up with no solution so far.

Upvotes: 1

Views: 93

Answers (3)

Dave Lasley
Dave Lasley

Reputation: 6292

Tables are bad juju for this exact reason. You should switch to a responsive layout. There are numerous libraries for this purpose; here are two that I have used extensively: http://www.responsivegridsystem.com/, http://getbootstrap.com/.

If you're not looking to use a library, check the possible dup

Here's how I would do it in bootstrap:

<div class='container-fluid'>
    <div class='row'>
        <div class='col-md-6'>
            Half the page
        </div>
        <div class='col-md-6'>
            Other half
        </div>
    </div>
</div>

Upvotes: 2

Parag Tyagi
Parag Tyagi

Reputation: 8970

You can use bootstrap responsive tables for this.
http://getbootstrap.com/css/#tables-responsive

<div class="table-responsive">
   <table class="table">
   ...
   </table>
</div>

Just add plugin, add simple code like above and voila.

Upvotes: 2

svidgen
svidgen

Reputation: 14302

Don't use a table. Use div's or some other non-table element, styled as an inline-block with a fixed width.

<style type='text/css'>
  .cell {
     display: inline-block;
     width: 200px; /* or whatever */
  }
</style>

<div class='cell'>something</div>
<div class='cell'>else</div>

If that doesn't suit you, start looking for other responsive design strategies.

Upvotes: 2

Related Questions