Rearrange a table based on classes with javascript for screen size changes?

Asked Oct 11 '19 at 09:22

Active Oct 11 '19 at 09:31

Viewed 62 times

Currently my table html layout looks like this with <tr> and <td> obviously being used

[text1]  [image1] 
[image2] [text2] 
[text3]  [image3]
[image4] [text4]

When it reaches <640px it looks like

[text1]
[image1]
[image2]
[text2]
[text3]
[image3]
[image4]
[text4]

Although i want

[text1]
[image1]
[text2]
[image2]
[text3]
[image3]
[text4]
[image4]

etc. Is this possible with CSS or javascript?

<table class="overview">
        <tr class="box one fadeInBlock">
            <td>
                <div class="homeInfo2">
                    {{ page.securityText|richtext }}
                </div>
            </td>
            <td>
                <div class="homeIm1 responsiveness">
                    Secuirty image
                </div>
            </td>
        </tr>
        <tr class="box two fadeInBlock">
            <td>
                <div class="homeIm2 responsiveness">
                    Fire image
                </div>
            </td>
            <td>
                <div class="homeInfo3">
                    {{ page.fireText|richtext }}
                </div>
            </td>
      </tr>

edited Oct 11 '19 at 09:28

asked Oct 11 '19 at 09:22

Joelad

So you want to hide 2nd column? – CaffeinatedCod3r Oct 11 '19 at 09:24
Sorry I changed it for no ambiguity – Joelad Oct 11 '19 at 09:24
Also you shouldn't use tables for layout – Pete Oct 11 '19 at 09:26
@Pete I got told somewhere else i should hmmm – Joelad Oct 11 '19 at 09:29
https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html - on top of the arguments in the question, you also have accessibility concerns. Also the html spec actually says not to: https://stackoverflow.com/questions/17503456/is-it-good-to-use-tables-in-html-5 – Pete Oct 11 '19 at 09:36
Well thats fair enough. Just change those to 50% and 100% divs then? – Joelad Oct 11 '19 at 09:41
1

I would use flex: https://jsfiddle.net/rafp3wh0/1/ – Pete Oct 11 '19 at 09:44
Aww thats brill! Thank you! Reading more into it doesnt make sense why theyre still a thing – Joelad Oct 11 '19 at 09:46
1

They should still be used for tabular data – Pete Oct 11 '19 at 09:47
Ah I suppose. Should give a warning or something for images. Cheers! – Joelad Oct 11 '19 at 09:49

Rearrange a table based on classes with javascript for screen size changes?

0 Answers0