Jump to content

How to select individual column ?


vmars316

Recommended Posts

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: &quot;Avenir Next&quot;;">
<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 by vmars316
typo
Link to comment
Share on other sites

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

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 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
×
×
  • Create New...