How do I make my column dynamic in HTML

Question

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?

Answer 1

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>

Answer 2

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.