Jump to content

Resizing browser window horz causes Table problem ?


vmars316
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 . 

Link to comment
Share on other sites

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
 

Link to comment
Share on other sites

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 by vmars316
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...