CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Diego Cortés
Diego Cortés

Reputation: 101

How do I make my column dynamic in HTML

I have a table with 2 columns as shown in example,

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

When table is re-sized (ie. width is reduced), How could I make td 2 to locate below td 1 rather than displaying side by side?

Upvotes: 6

Views: 221

Answers (3)

Ron Sims II
Ron Sims II

Reputation: 646

What you are trying to accomplish is generally referred to as responsive design and there are a number of good solutions like bootstrap that provide all the functionality you need.

I would suggest using something other than tables for layout (divs are nice). However, if you are representing data, then tables were made for this.

I highly recommend that you seek out a layout library/framework especially if you are dealing with tabular data, they have good established patterns that will help guide your design decisions and give you a decent blueprint for re-flowing the layout.

These sorts of frameworks will accommodate situations where the simple layout suddenly becomes more complicated.

Upvotes: 1

lackjaw
lackjaw

Reputation: 46

You can try display:inline-block using style or css

<table>
    <tr>
        <td style="display:inline-block">1</td>
        <td style="display:inline-block">2</td>
    </tr>
</table>

This way line breaks will be applied to the <td> element. Browser compatibility here: http://caniuse.com/#feat=inline-block

Upvotes: 0

m4n0
m4n0

Reputation: 32275

With respect to your current code, You can target the width using media queries and set the display mode of the td to block

But I suggest not to use tables for dynamic reordering since more data in various rows of the table will make it difficult to manage

@media (max-width: 768px) {
  td {
    display: block;
  }
}
table,
td {
  border: 1px solid gray;
}
td {
  width: 100px;
}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

Upvotes: 10

Related Questions