vmars316 Posted April 25, 2020 Share Posted April 25, 2020 (edited) Hello & Thanks : 1) How can I create parallel tables (ie. side by side) . 2) How can I select 1 column in a table (or table like structure) . 3) And I want Tables to be width-20% and width=80% respectively . 4) Also he rows need to line up . Because eventually the borders will be eliminatad . I am doing that here with fake Tables: http://vmars.us/reads/vmTemplate-2Parallel-Tables-P-Editable.html (It is contenteditable so you can see what I mean) But the problem comes in when I enter text that overflows , the tables get stacked on top of each other . Thanks <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>2Parallel-Tables-P-Editable.html</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> body { font-family: "Tahoma", Times, serif; font-size: 14px; } .Table { border-style: solid; text-align: center; border-color: #282A36; border-width: 2px; padding: 24px; */ } .Title { text-align: center; } .Heading { font-weight: bold; text-align: center; } .Row { border-style: solid solid solid solid; border-width: 2px; border-color: #D9B04E; } .Cell { text-align: left; vertical-align: middle; display: inline-block; padding-left: 5px; padding-right: 5px; border-style: solid solid solid solid; border-width: 1px; border-color: #D9B04E; } .StackCell {} .StackRow {} .button { background-color: #282A36; border: none; color: #C8982B; color: #D9B04E; text-align: center; text-decoration: none; display: inline-block; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-family: "Comic Sans MS", cursive, sans-serif; font-size: 24px; cursor: pointer; } span.RedTxt { color: red; } </style> </head> <body style="background-color:#EbE8E4; font-family: Tahoma; font-size:18px; color:black;"> <br> <div class="Table"> <div class="Title"> <p> <button class="button">Main Table</button> <br> </p> </div> <!-- <div class="Title"> --> <p></p> <!-- ============NewRow============== --> <p></p> <div class="Row"> <p></p> <!-- ---------------------NewCell------------------ --> <div class="Cell"> <p style="text-align:center;"> <div class="Table"> <div class="Title"> <p> <button class="button">TABLE 1</button> <br> </p> </div> <!-- <div class="Title"> --> <p></p> <!-- ============NewRow============== --> <p></p> <div class="Row"> <p></p> <!-- ---------------------NewCell-----------DancingMan - mp4 ------- --> <div class="Cell"> <p contenteditable="true" style="text-align:center;"> TABLE 1 row1 col1 </p> <br> </div> </div> <!-- <div class="Row" --> <!-- ============NewRow============== --> <p></p> <div class="Row"> <p></p> <!-- ---------------------NewCell-----------DancingMan - mp4 ------- --> <div class="Cell"> <p contenteditable="true" style="text-align:center;"> TABLE 1 row2 col1 </p> <br> </div> </div> <!-- <div class="Row" --> </div> <!-- div class="Table"> --> </p> <br> </div> <!-- ---------------------End of Cell------------------ --> <!-- ---------------------NewCell------------------ --> <div class="Cell"> <p style="text-align:center;"> <div class="Table"> <div class="Title"> <p> <button class="button">TABLE 2</button> <br> </p> </div> <!-- <div class="Title"> --> <p></p> <!-- ============NewRow============== --> <p></p> <div class="Row"> <p></p> <!-- ---------------------NewCell-----------DancingMan - mp4 ------- --> <div class="Cell"> <p contenteditable="true" style="text-align:center;"> TABLE 2 row1 col1 </p> <br> </div> </div> <!-- <div class="Row" --> <!-- ============NewRow============== --> <p></p> <div class="Row"> <p></p> <!-- ---------------------NewCell-----------DancingMan - mp4 ------- --> <div class="Cell"> <p contenteditable="true" style="text-align:center;"> TABLE 2 row2 col1 </p> <br> </div> </div> <!-- <div class="Row" --> </div> <!-- div class="Table"> --> </p> </p> <br> </div> <!-- ---------------------End of Cell------------------ --> <br> </div> <!-- <div class="Row" --> </div> <!-- div class="Table"> --> <div> <p style="text-align:center;"> <span style="font-size: 14pt; font-family: "Avenir Next";"> <br><br> <a href="http://vmars.us/"> http://vmars.us/ </a> </span> <br> <br>"All things in moderation , except for love and forgiveness" <br> </p> </div> </body></html> Edited April 25, 2020 by vmars316 typo Link to comment Share on other sites More sharing options...
dsonesuk Posted April 25, 2020 Share Posted April 25, 2020 I would consider using display flex, or display grid, the latter possibly being a better option. To have equal rows height? From both tables would be difficult, unless it is single table made to look like two. To access the columns, you would loop through each row, targeting all cells specific to column using its index. Can't you use css to break long text so it does not overflow. Link to comment Share on other sites More sharing options...
vmars316 Posted April 26, 2020 Author Share Posted April 26, 2020 (edited) Thanks Things are looking better http://vmars.us/reads/vmTemplate-2Parallel-Tables-P-Editable-BEST.html I can select copy paste each column . But I still have a problem when I resize browser window horizontally and make it smaller . Column 2 gets relocated under column 1 . I don't remember , what is the name of that behavior (that I want to stop) . I want to keep cols horz , if column 2 gets partially hidden , that's ok . Thanks Edited April 26, 2020 by vmars316 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now