Resizing browser window horz causes Table problem ?

[vmars316]

Hello & Thanks ;

Here is my example code 

http://vmars.us/reads/vmTemplate-2Parallel-Tables-P-Editable-BEST.html

Happily , I can select copy paste each column .

But I have a problem when I resize browser window horizontally and make it smaller .

Column 2 gets relocated under column 1 .

What is the name of that behavior (that I want to stop) , so that I can research it .

I want to keep cols parallel (not stacked) , if column 2 gets partially hidden , during resizing , that's ok , that's what I am after .

Thanks

[dsonesuk]

Its called being responsive, if the width of device is to to small to accommodate two column layout set column widths to 100% so they stack above each other.

You could set min-width: to fixed width value in px, before they forced to stack, then maybe try adding scrollbar using overflow.

[vmars316]

25 minutes ago, dsonesuk said:

Its called being responsive, if the width of device is to to small to accommodate two column layout set column widths to 100% so they stack above each other.

But I don't want them to stack .

I am trying to prevent that . 

[dsonesuk]

YES! I GET THAT, JEEZ WEPT.

READ THE SECOND PARAGRAPH

[vmars316]

On 4/28/2020 at 12:12 PM, dsonesuk said:

Its called being responsive, if the width of device is to to small to accommodate two column layout set column widths to 100% so they stack above each other.

Thanks dsonesuk ;
Oops! I didn't under what you meant . Ok I got it now .

Yes I see the example here :

https://www.w3schools.com/css/tryit.asp?filename=trycss_max-width

But can't duplicate it on my page .

https://www.w3schools.com/code/tryit.asp?filename=GEB8JFRQOJ9V 

Can you show me what I am doing wrong .
Thanks
 

[dsonesuk]

The reason they stack is because your non table layout is wrong! You are creating rows with single cells, when the should be rows with two cells 1 & 2, then row 2 with with cells 3, 4.

[vmars316]

Thanks ;

Ok , I got rid of too many cells .

https://www.w3schools.com/code/tryit.asp?filename=GEBIZVUXS4OE  

I made colored Borders around everything so its easier to see.

Sorry to say , still have the same problem .

Thanks

[dsonesuk]

What do you think was going to happen when you use empty BLOCK element paragraphs BETWEEN the INLINE-BLOCK elements cell elements, if you don't know... google block and inline html elements, don't bother me for the answer as its very very basic.

[vmars316]

Ahh... 

            min-width: max-content;

Works perfectly !

        .RowH1 {
            display: inline-block;
            border-style: solid solid solid solid;
            border-width: 2px;
            border-color: black;
            margin: 8px;
            min-width: max-content;
        }

Btw: the whole reason I went with Fake-Tables rather than real-tables i

s that I wanted to be able to select text by individual columns . 

Edited May 2, 2020 by vmars316