Jump to content
vmars316

Put two tables side by side (on same line)

Recommended Posts

Hello & Thanks ;

See Code below ;

I would like to Put two tables side by side (on same line) . 

<!DOCTYPE html>
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title></title>
<style>

#span01 {
    display: inline-block;
}

#span02 {
    display: inline-block;
}

</style>
</head>
<body contenteditable="true">
  <br>
  <span id="span01">
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
  </tbody>
</table>
  </span>  <!--  <span id="span01"> ---->
<br>
<br>
<br>
  <span id="span02">
<table  style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top;"><br>
      </td>
    </tr>
  </tbody>
</table>
  </span> <!--  <div id="span02">  -->
<br>
<br>
<br>
<br>
<br>

</body></html>

Thanks for your help .  

Edited by vmars316
typo

Share this post


Link to post
Share on other sites

Pls , Let me ask you this 

This time using <aside> 

How can I get   "word-wrap: break-word; "  to work for each cell (td) ?  

Right now it appears to stretch on into infinity . 

<!doctype html>
<html>
<head>
    <title></title>
</head>
<body>
<h3 style="text-align:center;"> Using multiple HTML5 aside tags . </h3>
        <aside style="float: right; width: 50%; font: 20px Calibri;">
<div>
<table  contenteditable="true" style="text-align: left; width: 100%;  " border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; overflow-wrap: break-word; " ><p>1</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;  overflow-wrap: break-word;  " ><p>2</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;  overflow-wrap: break-word; "><p>3</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
        </aside>

    <aside style="float: left; width: 50%; font: 20px Calibri ">
<div>
<table contenteditable="true" style="text-align: left; width: 100%;  " border="1" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; overflow-wrap: break-word; " ><p>1</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;  overflow-wrap: break-word;" ><p>2</p>
</td>
</tr>
<tr>
<td style="vertical-align: top; overflow-wrap: break-word;"><p>3</p>
</td>
</tr>
</tbody>
</table>
</div>
   </aside>
</body>
</html>

Thanks 

 

Edited by vmars316
typo

Share this post


Link to post
Share on other sites

Where is the problem of "stretch on into infinity" occuring?

You only have single #'s within the cells using the <p> tags (which wrap fine without the CSS

overflow-wrap: break-word;

code

What does the desired output look like?

 

Share this post


Link to post
Share on other sites

Your code does not validate, so we don't know if its the invalid html causing the problem, or what you think is maybe a problem.

Also let me go through commenting format for you again!

// or  /* .... */ GOOD For Javascript,

<!-- ......... -->  GOOD For HTML,

/* .... */ GOOD For CSS.

Share this post


Link to post
Share on other sites

Thanks ;

JMRKER :  Watch what happens when you hold down the 1 key .

The whole left table stretches way on top of the right table . 

 

Quote

What does the desired output look like?

I want it to each table to stay in place , and wrap each line .  

Thanks

Validated :

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
	<!-- https://www.freeformatter.com/html-validator.html  --> 
    <!-- // or  /* GOOD For Javascript */  -->
    <!-- GOOD For HTML -->  
    <!--  /* GOOD For CSS */   --> 
	<style>
	table {
	text-align: left; width: 100%;  background-color: rgb(232, 230 , 228);   border-style: solid;
    border-color: rgb(113, 30 , 19); 
	}
	p { background-color: rgb(246, 244, 242); 
	}
	</style>
</head>
<body>
<h3 style="text-align:center;"> Using multiple HTML5 aside tags . </h3>
        <aside style="float: right; width: 50%; font: 20px Calibri;">
<div>
<table  contenteditable="true" >
<tbody>
<tr>
<td style="vertical-align: top; overflow-wrap: break-word; " ><p>1</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;  overflow-wrap: break-word;  " ><p>2</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;  overflow-wrap: break-word; "><p>3</p>
</td>
</tr>
</tbody>
</table>
</div>
        </aside>
		
    <aside style="float: left; width: 50%; font: 20px Calibri ">
<div>
<table contenteditable="true">
<tbody>
<tr>
<td style="vertical-align: top; overflow-wrap: break-word; " ><p>1</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;  overflow-wrap: break-word;" ><p>2</p>
</td>
</tr>
<tr>
<td style="vertical-align: top; overflow-wrap: break-word;"><p>3</p>
</td>
</tr>
</tbody>
</table>
</div>
   </aside>
   
</body>
</html>

 

Share this post


Link to post
Share on other sites
1 hour ago, vmars316 said:

@vmars316 If you mean hold down the key constantly for the whole time, then what you see is exactly what should happen.
If you put only 1 space in that long line, the table will go back to its' normal size.  If you want a line of unbroken letters that long
you will need to redesign your table displays.

Something to consider would be to limit the line length input so that input could not extend past the original table size.

Or keep your long lines (if that is truly necessary) but look into the CSS element control of overflow: hidden

Or possibly add a CSS scroll function to your table display.

Personally, I never enter a line of 1's that long unless I have fallen asleep at the keyboard. :)

 

 

  • Confused 1

Share this post


Link to post
Share on other sites

Thanks ;

JMRKR "What does the desired output look like?

Here is exactly how I would like it to behave :

<!DOCTYPE html>
<html>
<style>
.Lcol {

}
.Rcol {

}
</style>
<body>
<h4>Editable-Simple-P.html Needs Copy Button + Which Col InputBox</h4>
<p  class="Lcol " contentEditable = "true" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 1. Lcol</p>
<p class="Rcol " contentEditable = "true" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 4. Rcol<hr></p>

<p class="Lcol " contentEditable = "true" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 2. Lcol</p>
<p class="Rcol " contentEditable = "true" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 5. Rcol<hr></p>

<p class="Lcol " contentEditable = "true" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 3. Lcol</p>
<p class="Rcol " contentEditable = "true" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 6. Rcol<hr></p>

</body>
</html>

Thanks

Share this post


Link to post
Share on other sites

You just need for the table

table-layout: fixed

	table {
    table-layout: fixed;
	text-align: left; width: 100%;  background-color: rgb(232, 230 , 228);   border-style: solid;
    border-color: rgb(113, 30 , 19); 
	}

 

Share this post


Link to post
Share on other sites
18 hours ago, vmars316 said:

Ah...What a relief , Thank You Very Much :)

Doesn't make much sense to me.

If you continue to hold the '1' key down (a long time),
it jumps to a second line and then continues behind the right table display
until it come out on the far right.  Then both tables shift to the right.

But if it fulfills your design desires, so be it.

Share this post


Link to post
Share on other sites

Yes , and I can select/copy each Table individually . 

Thanks 

What I don't like is that if I hit enter-key It creates what loos like a whole line . 

Is there a way to stop it from creating a whole new colored line ,

it looks like a whole new paragraph (sort of) . 

And keep enter-key  text in the same line . 

I could ignore the enter-key with .js , but then how would I create a new line ?

Type in blanks til I overflow to a new line ? 

Thanks

Share this post


Link to post
Share on other sites

Hello, @vmars316

Please try this code,To Put two tables side by side (on same line)

<strong>Using display: inline-block; </strong><br>
    <table border=1 class="inlineTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>
    <table border=1 class="inlineTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>

<hr>
<strong>Using float: left; </strong><br>
   <table border=1 class="floatedTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>
    <table border=1 class="floatedTable">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>

//Css File

        .floatedTable {
            float:left;
        }
        .inlineTable {
            display: inline-block;
        }

I hope this code will be useful.

Thank you.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...