Thanks Paul ;
The general rule seems to be if cells are ‘contenteditable=true’ , can only copy one cell at a time . If cells are contenteditable=false , can copy all cells with one copy . And the order of copied is row by row .
So given that , here are three
The 1st:
Of all the layouts I have found , the 1st example is the best for my purposes . I like the way it handles overflow and Enter-key .
<!DOCTYPE html>
<html>
<style>
#Lcol {
}
#Rcol {
}
</style>
<body>
<h4>Non-Editable Copies all [p] as One , No Column Copy</h4>
<p id="Lcol " contentEditable = "false" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 1. Lcol</p>
<p id="Rcol " contentEditable = "false" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 2. Rcol<hr></p>
<p id="Lcol " contentEditable = "false" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 3. Lcol</p>
<p id="Rcol " contentEditable = "false" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 4. Rcol<hr></p>
<p id="Lcol " contentEditable = "false" style="display: inline-block; background: yellow; width:45%;">This is a paragraph 5. Lcol</p>
<p id="Rcol " contentEditable = "false" style="display: inline-block; background: lightblue; width:45%;">This is a paragraph 6. Rcol<hr></p>
</body>
</html>
The second:
table-layout: fixed; width: 100%: Editable . I like the way it handles overflow and Enter-key . But of course it is Editable , no surprise it copies 1 cell at a time only .
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h4 style="color: rgb(0, 0, 0); font-family: Verdana; font-style: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
table-layout: fixed; width: 100%: Editable</h4>
<table style="border: 1px solid black; border-collapse: collapse; table-layout: fixed; width: 592px; color: rgb(0, 0, 0); font-family: Verdana; font-size: medium; font-style: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<tbody>
<tr>
<th style="border: 1px solid black;">
Company</th>
<th style="border: 1px solid black;">
Contact</th>
<th style="border: 1px solid black;">
Country</th>
</tr>
<tr>
<td contenteditable="true" style="border: 1px solid black;">
Alfreds Futterkiste</td>
<td contenteditable="true" style="border: 1px solid black;">
Maria Anders</td>
<td contenteditable="true" style="border: 1px solid black;">
Germany</td>
</tr>
<tr>
<td contenteditable="true" style="border: 1px solid black;">
Island Trading</td>
<td contenteditable="true" style="border: 1px solid black;">
Helen Bennett</td>
<td contenteditable="true" style="border: 1px solid black;">
UK</td>
</tr>
<tr>
<td contenteditable="true" style="border: 1px solid black;">
Magazzini Alimentari Riuniti</td>
<td contenteditable="true" style="border: 1px solid black;">
Giovanni Rovelli</td>
<td contenteditable="true" style="border: 1px solid black;">
Italy</td>
</tr>
</tbody>
</table>
</body>
</html>
The 3rd:
Is your code , which I used as a Template to create a Html-Grid-Generator.exe program . It just needs a few finishing touches ;
Also mentioned here :
https://www.sitepoint.com/community/t/how-to-make-each-grid-column-individually-selectable/351615/24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- https://www.freeformatter.com/html-validator.html -->
<style>
/* comment */
.grid-container {
display: grid;
grid-gap: 2px; /*grid-gap*/
grid-template-columns: repeat(
auto-fill,
minmax(120px, 100%) minmax(120px, 100%) minmax(120px, 100%) minmax(120px, 100%)
);
background-color: blue; /*grid-background-color*/
padding: 4px; /*padding*/
}
.grid-container > .div_div{
text-align: center;
font-size: 12px;
background-color: rgba(255, 255, 255, 0.8);
padding: 4px;
}
// .div_div { resize: vertical; }
textarea { resize: none;
height: 200px; /*textarea-height*/
Width: 100%;
}
</style>
</head>
<body>
<h5 style="text-align: center;" >Generated By Html-Grid-Maker</h5>
<!-- comment -->
<div class="grid-container">
<!-- <div class="div_div" style="order: 1;">1</div> -->
<div class="div_div"style="order: 1;"> Row 1 Col 1 </div>
<div class="div_div"style="order: 5;"> Row 2 Col 1 </div>
<div class="div_div"style="order: 9;"> Row 3 Col 1 </div>
<div class="div_div"style="order: 13;"> Row 4 Col 1 </div>
<div class="div_div"style="order: 17;"> Row 5 Col 1 </div>
<div class="div_div"style="order: 21;"> Row 6 Col 1 </div>
<div class="div_div"style="order: 2;"> Row 1 Col 2 </div>
<div class="div_div"style="order: 6;"> Row 2 Col 2 </div>
<div class="div_div"style="order: 10;"> Row 3 Col 2 </div>
<div class="div_div"style="order: 14;"> Row 4 Col 2 </div>
<div class="div_div"style="order: 18;"> Row 5 Col 2 </div>
<div class="div_div"style="order: 22;"> Row 6 Col 2 </div>
<div class="div_div"style="order: 3;"> Row 1 Col 3 </div>
<div class="div_div"style="order: 7;"> Row 2 Col 3 </div>
<div class="div_div"style="order: 11;"> Row 3 Col 3 </div>
<div class="div_div"style="order: 15;"> Row 4 Col 3 </div>
<div class="div_div"style="order: 19;"> Row 5 Col 3 </div>
<div class="div_div"style="order: 23;"> Row 6 Col 3 </div>
<div class="div_div"style="order: 4;"> Row 1 Col 4 </div>
<div class="div_div"style="order: 8;"> Row 2 Col 4 </div>
<div class="div_div"style="order: 12;"> Row 3 Col 4 </div>
<div class="div_div"style="order: 16;"> Row 4 Col 4 </div>
<div class="div_div"style="order: 20;"> Row 5 Col 4 </div>
<div class="div_div"style="order: 24;"> Row 6 Col 4 </div>
</div>
<br><br>
</body>
</html>
Next I think I’ll see if I can write .js code for the Non-Editable examples above to Copy/Capture each cell , by column . Do you think this is possible ?
Thanks
Btw: The code you Posted above gives really strange results in Chrome ; try propagating , let’s say , a ‘zzzzzzzzzzzz’ til it overflows .