// CTRL + Click to Edit Text
/*
|| - This is not required it is for demonstration purposes.
|| This is to simulate dynamic content.
|| - Press the ctrl key + click with mouse/pointer device on
|| either cell to edit the text.
*/
var table = document.querySelector('table');
table.onclick = edit;
function edit(e) {
if (e.target.classList.contains('text') && e.ctrlKey) {
if (!e.target.classList.contains('edit')) {
e.target.contentEditable = true;
e.target.classList.add('edit');
} else {
e.target.contentEditable = false;
e.target.classList.remove('edit');
}
}
}
/*
|| - Collapsed borders and fixed layout gives us a degree control.
|| - 100% x 100% makes the tbody, tr, and to some extent td
|| stretch to their borders.
*/
table {
border-collapse: collapse;
table-layout: fixed;
width: 300px;
height: 100%;
border: 2px solid #000;
}
/*
|| - vertical-align: top aligns each of the cells' content to the
|| top.
*/
td {
width: 150px;
border: 1px solid grey;
vertical-align: top;
}
/*
|| - This is a figure tag within each td. It stabilizes
|| dimensions of the td it's nested in by always being at 100%
|| of the td height (not its own height).
|| - Note it has display: table and fixed layout. having a nested
|| tabled within a real td gives us more control and less
|| unpredictable behavior.
|| - The word-* and overflow properties are applied here because
|| the figure is the buffer between the text of the figcaption
|| and the td that they all reside within.
|| - The .separator is actually the bottom border of the figure.
|| This ensures that the green line is always at the bottom of
|| each cell. Note that the color of the line on the left is
|| red. That was intentional in order to show that they were
|| separate.
*/
.content {
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
word-break: break-word;
word-wrap: break-word;
overflow-x: hidden;
border-bottom: 0.5ex solid rgba(0, 200, 0, 0.75);
}
/*
|| - This is the figcaption nested within each figure. Having
|| display:table-cell allows the figcaption to expand vertically
|| when the text increases.
|| - The padding is in ch units. Ch size is relative to the font.
|| I don't se the advantage IMO but as a rough equivalent to a
|| character's width, ch seems to be the closest.
*/
.text {
display: table-cell;
padding: 1ch 0.75ch 1ch 1ch;
}
/*
|| This is the red line previously mentioned
*/
td:first-of-type figure {
border-bottom: 0.5ex solid rgba(200, 0, 0, 0.9);
}
/*
|| - The remaining rule sets are for the demonstration they are
|| not required nor suggested.
*/
b {
font-size: 15vh;
}
kbd {
border: 2px outset grey;
border-radius: 4px;
padding: 2px 3px;
}
<table>
<tr>
<td>
<figure class='content'>
<figcaption class='text'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</figcaption>
</figure>
</td>
<td>
<figure class='content'>
<figcaption class='text'>
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
<p style='color:green'>To edit text on either cell:</p>
<p>PC: <kbd>ctrl</kbd></p>
<p>or</p>
<p>Mac: <kbd>⌘</kbd></p>
<p><sup>➕</sup> <b>🖰</b></p>
</figcaption>
</figure>
</td>
</tr>
</table>