Geek Answers Handbook

How to make a dynamic column in HTML

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

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

When the table is redefined (i.e. the width is reduced), how can I do td 2 to search below td 1 and not be displayed side by side?

+5
source share
3 answers

As for your current code, you can target width by multimedia queries and set the td display mode to block

But I suggest not using tables for dynamic reordering, since more data in different rows of the table will make management difficult

 @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>
+11
source

What you are trying to accomplish is usually called responsive design , and there are a number of good solutions like bootstrap that provide all the necessary functionality.

I would suggest using something other than tables for layout (divs are nice). However, if you are presenting data, tables have been made for this.

I highly recommend that you look for a library / layout structure, especially if you deal with tabular data , they have well-established templates that will help you identify your design decisions and give you a decent plan for reprogramming the layout.

These types of frameworks will take into account situations where a simple layout suddenly becomes more complex.

+1
source

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

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

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

0
source

More articles:


All Articles