Oh very good Archibald! It gives me something to play with. Did you see my flat file? How would you go about putting all the blue lines in the second column (COL-B) for each of the 12 rows? I tried, alas I couldn’t get Grid to work and I’m hoping the presence of 12 cells will betray (( a pattern )). I’m looking for cut lines.
Because of rowspan="3" there are three <tr> rows for each first column row, so you need to replicate the HTML of the three <tr> rows and edit the text.
I’ve updated the CodePen in my previous post.
1 Like
Excellent BUT I need the bottom solid black border – the thick one, not the 2px cell borders. The rows have to be accentuated. We’re going to be ending up with a long, long ladder .
Try adding:
tr:nth-child(3){
border-bottom: 8px solid black;
}
EDIT: . . . . or replicate all the second table instead of replicating three <tr> rows.
These have been removed:
/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ /
R E M O V E D
/
.span1 {background-color: #e2ff9e;}
.type1 {background-color: #ffa3d3;}
.type2 {background-color: #96e2ff;}
.type3 {background-color: #ffda7e;} /
/ R E M O V E D
TH {
float: left;
clear: both;
vertical-align: bottom;
padding: .38rem;
text-align: CENTER;
color: WHITE;
background-color: BLACK;
line-height: 1;
font-weight: 600;
font-size: 1rem;
font-family: ‘Roboto Slab’, sans-serif;
} /
/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ /
AGATHA {
font-style: italic;
text-decoration: underline;
line-height: 1.5;
font-weight: 400;
font-size: 1.5rem;
font-family: ‘CALISTOGA’, cursive;
}
#CLAIR {
font-style: italic;
line-height: 1.5;
font-weight: 400;
font-size: 1.5rem;
font-family: ‘CHICLE’, cursive;
}
/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
And this is the pathetic state I’m in currently. I have been looking at way too much code and it begins to blur!
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Chicle&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<j&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=New+Rocker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ribeye+Marrow&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sancreek&display=swap" rel="stylesheet">l
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ -->
<TITLE>90 Archibald ᰄ “No Grid, No Flex” Just Rowspan & Blue Tabledby semicodin</TITLE>
<STYLE>
* {
margin: 0; /* ARCHIBALD */
padding: 0;
border: 0;
outline: 0;
}
BODY {
margin-left: 5%;
margin-right: 5%;
margin-top: 54px;
margin-bottom: 54px;
font-size: 1em;
line-height: 1;
font-weight: 500;
font-family: 'Roboto Slab', sans-serif;
}
.BDRUP {
margin-top: 1.88rem;
margin-bottom: .5rem;
border-top: 4px SOLID CRIMSON;
}
.GRPBD {
font-weight: BOLD;
}
.BLU {color: BLUE}
.CRIM {color: CRIMSON}
.CRIMU {color: CRIMSON; text-decoration: UNDERLINE;}
.UNDR {text-decoration: UNDERLINE}
.BOLD4 {font-weight: 400}
.BOLD5 {font-weight: 500}
.BOLD6 {font-weight: 600}
.BOLD7 {font-weight: 700}
.BOLD8 {font-weight: 800}
.BOLD9 {font-weight: 900}
.CAL {font-family: "CALISTOGA"} /* USING FILLER TO USE UP ONE FONT */
.CHI {font-family: "CHICLE"} /* USING FILLER TO USE UP ONE MORE FONT */
/* HERE ARE OUR “TEN LITTLE SOLDIER BOYS!” . . . */
.COU {font-family: "COURIER PRIME"; font-weight: BOLD;}
.CRE {font-family: "CRETE ROUND"}
.ENC {font-family: "ENCODE SANS SEMI CONDENSED"}
.HEN {font-family: "HENNY PENNY"}
.MET {font-family: "METAL MANIA"}
.NEW {font-family: "NEW ROCKER"}
.RIB {font-family: "RIBEYE MARROW"}
.SAN {font-family: "SANCREEK"}
.SPE {font-family: "SPECIAL ELITE"}
.UNC {font-family: "UNCIAL ANTIQUA"}
/* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */
.AA {line-height: 1.1; font-weight: 400; font-size: 1.5rem;}
.BB {line-height: 1.1; font-weight: 400; font-size: 1.25rem;}
.CC {line-height: 1.1; font-weight: 400; font-size: 1.13rem;}
.DD {line-height: 1.1; font-weight: 400; font-size: .88rem;}
.EE {line-height: 1.1; font-weight: 400; font-size: .75rem;}
.FF {margin-top: 1.25rem; line-height: 1.1; font-weight: 400; font-size: .63rem;}
.AAb {line-height: 1.1; font-weight: BOLD; font-size: 1.5rem;}
.BBb {line-height: 1.1; font-weight: BOLD; font-size: 1.25rem;}
.CCb {line-height: 1.1; font-weight: BOLD; font-size: 1.13rem;}
.DDb {line-height: 1.1; font-weight: BOLD; font-size: .88rem;}
.EEb {line-height: 1.1; font-weight: BOLD; font-size: .75rem;}
.FFb {margin-top: 1.25rem; line-height: 1.1; font-weight: BOLD; font-size: .63rem;}
.BBbL {line-height: 2; font-weight: BOLD; font-size: 1.25rem;}
.FFL1 {line-height: 1; font-weight: BOLD; font-size: .63rem;}
.FFL2 {line-height: 2; font-weight: BOLD; font-size: .63rem;}
/* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */
/* PULLING ROBOTO SLAB FRM LINEUP (DEFAULTS TO BODY) */
.ROB {
font-weight: 600;
font-family: "ROBOTO SLAB";
}
/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
table {
border-collapse: collapse;
border: 6px SOLID BLACK;
}
td {border: 2px solid black;}
tr:first-child { background-color: black; color: white; }
.span1 {
vertical-align: TOP;
line-height: 1;
font-weight: 700;
font-size: 1rem;
font-family: 'COURIER PRIME', monospace;
}
.type1 {
vertical-align: TOP;
font-style: ITALIC;
line-height: 1.1;
font-weight: 400;
font-size: 1rem;
font-family: 'CRETE ROUND', serif;
}
.type2 {
vertical-align: TOP;
line-height: 1.5;
font-weight: 400;
font-size: 1rem;
font-family: 'HENNY PENNY', display;
}
.type3 {
vertical-align: TOP;
line-height: 1;
font-weight: 400;
font-size: 1rem;
font-family: 'METAL MANIA', display;
}
table {
border-collapse: collapse;
}
td, th {
padding: .38rem;
border: 2px solid black;
height: 30px;
}
tr:first-child {
background-color: black;
color: white;
}
.TWOCOLS {
display: TABLE CELL;
border: 6px GROOVE #00FFFF;
background-color: BLACK;
}
/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
.HDNGL {width: 50%; color: WHITE;}
.HDNGR {width: 40%; color: WHITE;}
table {
border-collapse: collapse;
width: 60%;
margin: 0 auto;
}
.header {
border: 6px inset #00ffff;
text-align: CENTER;
color: WHITE;
background-color: BLACK;
font-weight: 600;
font-size: 1rem;
font-family: "Roboto Slab", sans-serif;
}
.rows {
border: 6px solid black;
border-top: none;
}
td {
border: 2px solid black;
border-top: none;
width: 50%;
padding: 5px;
}
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TBODY>
<TR>
<DIV class="TWOCOLS">
<DIV class="HDNGL">HEADING FOR THE LEFT COLUMN</DIV>
<DIV class="HDNGR">HEADING FOR THE RIGHT COLUMN<DIV>
</DIV>
</TR>
<!-- ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ -->
<TR>
<td class="span1" rowspan="3">
<div class="BDRUP"></div>
<DIV style="font-style: italic; text-decoration: underline; line-height: 1.5; font-weight: 400; font-size: 1.5rem; font-family: 'CALISTOGA', cursive;">
“And Then There Were None”</div>
<div class="CAL">
<div class="FF">
<p>This is a sample of the Google Font “Calistoga” – a bold serif.</p>
</DIV>
<!-- Should close COL-A + keep CALISTOGA FOR COL-B -->
<!-- commences COL-2 w/its 3 rows -->
<div class="BLU">
<div class="BB">
is a 1945 black and white film adaptation</div>
<div class="CC">
of Agatha Christie’s 1939</div>
<div class="DD">
mystery novel of the same name,</div>
</div> <!-- Should close CALISTOGA -->
</div> <!-- CLOSES THE BLUE (COL-B) -->
<!-- ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ -->
<!-- commences COL-2 w/its 3 rows -->
<div class="BLU">
<div class="BB">
is a 1945 black and white film adaptation</div>
<div class="CC">
of Agatha Christie’s 1939</div>
<div class="DD">
mystery novel of the same name,</div>
</div> <!-- Should close CALISTOGA -->
</div> <!-- CLOSES THE BLUE (COL-B) -->
<!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ -->
<div class="BDRUP"></div>
<div style="font-style: italic; line-height: 1.5; font-weight: 400; font-size: 1.5rem; font-family: 'CHICLE', cursive;">
. . . directed by René Clair. Clair’s</div>
<div class="CHI">
<div class="FF">
<p>This is a sample of the Google Font <span class="font-name">“Chicle”</span> – a condensed, “groovy” font in a bold weight</p>
</DIV>
<!-- Should close COL-A + keep CHICLE FOR COL-B -->
<!-- ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ -->
<!-- commences COL-B w/its 3 rows -->
<div class="BLU">
<div class="BB">
film adaptation is considered</ditd>
<div class="CC">
the finest adaptation ever made by</div>
<div class="DD">
film critics and fans to this day.</div>
</div> <!-- SHOULD CLOSE CHICLE -->
</div> <!-- CLOSES THE BLUE (COL-B) -->
<!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ -->
<!-- ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ -->
<td>
</tr>
<tbody>
</table>
</body>
</html>
Let me ask you something Archibald. Everything else being equal, why really do I need to be doing this in a table? Because it seems to me that the minute I can get into COL-B it’s going to be Mr. Toad’s Wild Ride: who needs cells – I can just stack my
s in COL-B and move them around wherever I need them.
It looks like you need to start again.
You don’t need to be doing this in a table.
Here I have replicated the second table once; you will need to replicate more times:
An advantage of using separate tables in this way is that it is easy to identify each table in the HTML and it is easy within each table to find the three <tr> rows and four <td> cells.
What software are you using to edit your code?
That is not valid html. I already mentioned this in my second post (#26) in this thread!!! I won’t mention it again.
That’s fine and I understand. 
I will withdraw from the thread and allow you to continue with your own non grid approach. However I still confirm that the grid example I gave was miles simpler than the table approach (html and css) and worked in every situation that was needed and was easily adaptable…
I don’t believe that’s quite true either as the basic table concept was sound. However you started changing the structure to accommodate double borders on the header when that could have been done by using the border-separate model instead of the collapsed border model and styling the borders on each header individually to give the illusion of one border (much as I did in one of my demos already). It was a bit of a pain to do but not impossible and only affects the header rows anyway.
Okay. 
Thank you guys. This is how I learn. It ain’t pretty!
1 Like
Hee Hoooot! I pity anyone going head to head with you Paul lol 
Oh don’t withdraw from the thread Paul. I’ve had a miserable few months following my robbery and oddly enough coding helps me as they took everything. Everything. But let that bide . . .
I’m uploading a graphic that represents my FINAL design theme for this little monster. I titled it “Intersection” because the only way it works is to make sure at all times those red monkey tags match up. Put another way, this isn’t merely a simple matter of piling divs one on top of one another because it would be a nightmare to edit. This list will grow, expand and (at times) shrink regularly.
The two columns need to be “seated” each with their row mate at all times: COL-A’s BABOON must stay attached to COL-B’s BABOON etc. Different fonts will appear. But the one thing that will never change is the color scheme for this list. So let’s talk about that for a minute:
COL-A will have one set background color: #EAFEFF — a pale shade of the CYAN that appears in the table’s borders and (at times) elements in the cell itself. Glyphs will make appearances in either of the columns, altering the line heights of the rows. This is why it’s so important that (eg.) CHIMP always seat exactly with the other CHIMP who is his row mate.
COL-B will get nth-child striping but not COL-A (the column-fixed, pale CYAN hue). The only rule about this is that I want the WHITE stripe to lead with ODD and then the pale yellow rotate as EVEN.
Archibald has won me to his way of thinking: let’s do divide the header with its GROOVE line. That CYAN border looks so arresting, I just love it.
Paul (anyone) – I would like to do both versions of this: One as FLEX and one as GRID. I want to study them both. I was about to say, All my Sitepoint helpers have their own folder on my computer but of course I have no computers because I don’t have anything but my furniture after the robbery. Please hang in there with me Paul. All of you! Let’s code. Here is what this little 2-Column table is supposed to look like:
The grid and flex versions I already gave will do this. It’s just a matter of changing the border and background colours to match the changes in your drawing. The striping on one side only is a little more complex but can still be done assuming there are 3 items in each column2 row.
This may not be exact but you should get the idea.
Grid:
Flex:
(I’m not going to try and replicate those colored borders exactly )
2 Likes
Thank you Paul. I may be popping in here with questions. May I ask right now . . . in the flex version you used ‘wrap’ and this was curious to me because (unlike the way we typically use that word in text composition) I thought Wrap was in reference to wrapping the ITEMS themselves – the ‘chunks’ of text, allowed to jump their row and occupy another row. Because my table must never spill over to another row. It can deviate vertically – that is what this table is about in so many ways – but it remains a single-row enterprise.
And in the course of researching Flex I observed a number of people remarking that selective striping (of the kind we’re discussing) could only be accomplished by “enclosing the text in multiple <tbody> tags”. Have you heard about this? Just curious to get your view on it generally.
Thank you Paul. I’ll go in and mine your replies. 
— s
The thing you have to wrap your mind around when dealing with flex vs grid is how each handles dimensioning. Grid works in two dimensions, like you would be placing things on a piece of graph paper or while playing Battleship
Conversely, Flex is solely one dimension - everything is in a straight line. Now, you can specify the direction (row vs column and forward vs reverse) by setting the flex direction. But everything is still one direction.
So you’ll always have ABCDE
or
A
B
C
D
E
However, if you tell flex to wrap, then it will wrap the content once it’s hit the boundaries of the window it’s being displayed in. In Paul’s version, you’ll see that the .col1 and .col2 classes are both set to 50%. That means they will take up 50% of the container they are in. 50+50 = 100, so each time, they will take up the whole width, and wrap the next instances below.
w/o wrap it would be
.col1 .col2 .col1 .col2 .col1 .col2 …ad nauseum with a massive scroll bar.
But because he used flex:wrap, every time the content reached 100% of the container, and each block was 50% wide, it wrapped the content, giving you
.col1.col2
.col1.col2
.col1.col2
1 Like
tbody tags only refer to tables but they are basically just wrappers for content that allow you to separate content into chunks if required. However they won’t really help as tables already have table-rows so in effect they have wrappers for each row by default anyway. Multiple tbody tags would only be useful for grouping multiple table rows but don’t really have any influence on the problem at hand.
The problem with alternate striping is that the elements must all be siblings in order to do this properly.
e.g.You need this structure.
<div>stuff</div>
<div>stuff</div>
<div>stuff</div>
<div>stuff</div>
<div>stuff</div>
However if you have other elements in the mix (such as left column html) then there is no consistent sequence of elements and the striping will fail.
I was able to stripe the elements in my last demos because I have assumed that the right column always has three entries and therefore I can use odd and even on the container to style each odd or even (item) row differently to give the illusion of a consecutive structure.
/* alternate colors*/
.item {
background: #ffc;
}
.container:nth-of-type(odd) .col2 .item:nth-of-type(even) {
background: lightblue;
}
.container:nth-of-type(even) .col2 .item:nth-of-type(odd) {
background: lightblue;
}
1 Like
Oh what a brilliant explanation Dave. It’s so good it’s going in my binder w/other snippets. Thank you for allowing my brain to wrap around that.
And again I’m stuck but will put it in its own post . . .
Okay I am stuck on Line 246 — yes (what else?) the code transition from one column to the next. Paul I have to use my two styles COL-A and COL-B or I won’t be able to SEE YOUR CODE. It looks like a hay stack to me. But take comfort: I did a global case change on the whole file and there is now nothing capitalized whatsoever.
How how HOW do I make the leap to the second column?!! Or is this one of your linear dimensional facts of Flex Dave? 
Here it is w/some CSS rearrangements so I don’t go mad before even the first row is complete. I began losing it on LINE 246 and take no responsibility for what comes after . . .
‘Maestro’ is my nick for Paul. And please look at the graphic I posted last night/wee hours today. The content is right there to follow . . .
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=crete+round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=encode+sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=encode+sans+semi+condensed:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=encode+sans+condensed:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=henny+penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=metal+mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=new+rocker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=ribeye+marrow&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=roboto+slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=roboto+condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=sancreek&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=special+elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=uncial+antiqua&display=swap" rel="stylesheet">
<title>9997 flex w/rowspan striping ᰄ courtesy paul o’brien</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
body {
margin-left: 5%;
margin-right: 5%;
margin-top: 1rem;
margin-bottom: 2rem;
font-size: .75rem;
line-height: 1;
font-weight: 600;
font-family: 'encode sans condensed', sans-serif;
}
.bucket {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
flex-grow: 1;
flex-basis: auto;
}
.lead1 {
color: crimson;
text-align: center;
vertical-align: bottom;
font-style: italic;
font-size: 2rem;
line-height: 1.1;
font-weight: bold;
font-family: 'crete round';
}
.lead2 {
color: #929292;
text-align: center;
vertical-align: bottom;
margin-bottom: .5rem;
font-size: .75rem;
line-height: 1.1;
font-weight: bold;
font-family: 'roboto slab';
}
.blu {color: blue}
.crim {color: crimson}
.crimb {color: crimson; font-weight: bold;}
.crimu {color: crimson; text-decoration: underline;}
.ctext {color: cyan}
.dblu {color: dodgerblue}
.undr {text-decoration: underline}
.hilite1 {color: #ffffdd} /* used w/ */
.hilite2 {color: #ffffcc} /* use for text on black bkg. */
.ytext {color: #ffff80} /* use for text on black bkg. */
/* #ffff80 is the boldest yellow (of my set). */
.boldly {font-weight: bold}
.plainly {font-weight: normal}
/* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */
.col1,
.col2 {
display: flex;
flex-direction: column;
}
.col-a {
flex: 1 0 50%;
border-left: 8px groove cyan;
min-width: 50%;
border-right: 2px solid black;
border-bottom: 2px solid black;
color: black;
line-height: 1;
font-weight: 800;
font-size: .75rem;
font-family: 'encode sans condensed', sans-serif;
}
.col-b {
flex: 1 0 50%;
border-right: 8px groove cyan;
border-bottom: 2px solid black;
width: auto;
color: black;
line-height: 1;
font-weight: 500;
font-size: .75rem;
font-family: 'encode sans condensed', sans-serif;
}
/* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */
/* maestro: lets use border box model so padding and borders are included in width */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* maestro: lower case for selectors please */
p {margin: 0 0 1rem;}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.container:last-of-type {
border-bottom: 8px groove cyan;
}
.header {
margin: 0;
display: flex;
flex: 1 0 100%; /* paul, left col needs to be min-width 50% */
min-width: 50%; /* and the right col needs to be auto */
background: black;
color: white;
font-size: .75rem;
line-height: 1;
font-weight: 800;
font-family: 'encode sans condensed', sans-serif;
}
/* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */
.col1header,
.col2header {
display: flex;
flex-direction: column;
margin: 0;
flex: 1 0 50%;
min-width: 50%;
min-width: 0;
font-size: 1.5rem;
text-align: center;
padding: 16px;
border: 8px groove cyan;
border-top-color: cyan;
border-left-color: cyan;
}
.col1header {
justify-content: flex-end;
}
/* maestro: drag border on top */
.col2header {
margin-left: -8px;
}
.item {
line-height: 1.5;
font-weight: 400;
font-size: 1rem;
padding: 5px;
border-bottom: 2px solid black;
flex: 1 0 0;
background: #fff;
}
.container:last-of-type .item:last-child {
border-bottom: none;
}
/* maestro: just style the differences using an extra class*/
.cal {font-family: "calistoga"}
.chi {font-family: "chicle"}
.cou {font-family: "courier prime"}
.cre {font-family: "crete round"}
.enc {font-family: "encode sans condensed"}
.encb {font-family: "encode sans condensed; font-weight: 800;"}
.hen {font-family: "henny penny"}
.met {font-family: "metal mania"}
.new {font-family: "new rocker"}
.rib {font-family: "ribeye marrow"}
.rob {font-family: "roboto slab"}
.san {font-family: "sancreek"}
.sol {font-family: "solway"}
.spe {font-family: "special elite"}
.unc {font-family: "uncial antiqua"}
.boldly {
line-height: 1.1;
font-weight: bold;
font-size: .75rem;
font-family: 'encode sans condensed', sans-serif;
}
.plainly {
line-height: 1.1;
font-weight: normal;
font-size: .75rem;
font-family: 'encode sans condensed', sans-serif;
}
.font-name {
text-transform: uppercase; /* let css handle case not mark up*/ }
/* maestro: colors */
.col1 .item {background: #eafeff;}
.col2, item {background: white;}
.container:nth-of-type(odd) .col2 .item:nth-of-type(even) {
background: #eafeff;
}
.container:nth-of-type(even) .col2 .item:nth-of-type(odd) {
background: white;
}
</style>
</head>
<body>
<div class="col-a">
<p><span class="crimb">gorilla</span>
<span class="encb"> quae quidem vel cum periculo est quaerenda vobis; non moveatur et offensione turpitudinis to comprobatione honestatis?</span</p>
<p><span class="col-b">
<span class="crimb">gorilla</span><span class="enc"> sed haec nihil sane ad rem; esse enim quam vellet iniquus iustus poterat inpune. ut placet, inquit, etsi enim illud erat aptius, aequum cuique concedere.</p>
<p>quacumque enim ingredimur, in aliqua historia vestigium ponimus.</p>
<p>amicitiam autem adhibendam esse censent, quia sit ex eo genere, quae prosunt.</p>
</div>
<div class="met">
<p>this is a sample of the google font <span class="font-name">“metal mania” </span>– a gothic font rendered in small caps, particularly suited to <b>shakespeare excerpts</b> i have found.</p>
<p>more stuff here</p>
</div>
<!-- maestro: container -->
<div class="container">
<div class="col1">
<div class="item rob">
<p>more stuff here</p>
</div>
</div>
<div class="col2">
<div class="item rib">
<p>more stuff here</p>
</div>
</div>
<div class="item san">
<p>more stuff here</p>
</div>
<div class="item new">
<p>more stuff here</p>
</div>
</div> <!-- closing container -->
</body>
</html>
Following are 2 cut&paste coding tools I made if anyone’s interested in test driving their code. The second one is in all lowercase. 
MIXED CASE ——
This is the Mixed-Case version. I’m posting an all-lowercase version as well.
Just a quick cut & paste sheet for use with the 4 dominant styles used in my monkey table. IMPORTANT! I’ve divided each snippet/row/column by the following
</p><p></p>
because I don’t know what I’m doing but have a reasonable expectation that <p> is involved somewhere between them! I have you covered if it starts with a <p> . . . OR with a </p>. Just backspace out the one you don’t want!
And here’s a quick overview of the 4 dominant styles used in my monkey table-that-isn’t-a-table:
.CRIM {color: CRIMSON}
.CRIMB {color: CRIMSON; font-weight: BOLD;}
.ENC {font-family: “ENCODE SANS CONDENSED;”}
.ENCb {font-family: “ENCODE SANS CONDENSED; font-weight: 800;”}
Here they are, complete with their Latin!
<span class="CTEXT">INQUIT,<BR>
NON SATISFACIT?</span></TH>
<TH> <!-- HEADING FOR 2nd COLUMN -->
EPICURI DIEM NATALEM, QUAM ILLIUS TESTAMENTO<BR>
<span class="CTEXT">
CAVERE UT </span>
<span class="YTEXT">AGERETUR</span></TH>
<!-- ▬▬▬▬▬▬▬ ROW 1 COMMENCES ▬▬▬▬▬▬▬ -->
</p><p></p>
<span class="CRIMB">GORILLA</span> Quae quidem vel cum periculo est quaerenda vobis; non moveatur et offensione turpitudinis et comprobatione honestatis?</td>
</p><p></p> <!-- STARTS COL-B -->
<span class="CRIMB">GORILLA</span> Sed haec nihil sane ad rem; Esse enim quam vellet iniquus iustus poterat inpune. Ut placet, inquit, etsi enim illud erat aptius, aequum cuique concedere.
</p><p></p>
Quacumque enim ingredimur, in aliqua historia vestigium ponimus.
</p><p></p>
Amicitiam autem adhibendam esse censent, quia sit ex eo genere, quae prosunt.</td>
<!-- ▬▬▬▬▬▬▬ ROW 2 COMMENCES ▬▬▬▬▬▬▬ -->
</p><p></p>
<span class="CRIMB">BABOON</span>
Qualem igitur hominem natura inchoavit?
</p><p></p>
Vestri haec verecundius, illi fortasse constantius. Murenam te accusante defenderem.</td>
</p><p></p> <!-- STARTS COL-B -->
<span class="CRIMB">BABOON</span> Sed haec nihil sane ad rem; Esse enim quam vellet iniquus iustus poterat inpune. Ut placet, inquit, etsi enim illud erat aptius, aequum cuique concedere.
</p><p></p>
Amicitiam autem adhibendam esse censent, quia sit ex eo genere, quae prosunt.
</p><p></p>
Qualem igitur hominem natura inchoavit? Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba.</td>
<!-- ▬▬▬▬▬▬▬ ROW 3 COMMENCES ▬▬▬▬▬▬▬ -->
</p><p></p>
<span class="CRIMB">CHIMP</span>
Qualem igitur hominem natura inchoavit? Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba.
</p><p></p>
Quae quidem vel cum periculo est quaerenda vobis; non moveatur et offensione turpitudinis et comprobatione honestatis?</td>
</p><p></p> <!-- STARTS COL-B -->
<span class="CRIMB">CHIMP</span> Amicitiam autem adhibendam esse censent, quia sit ex eo genere, quae prosunt.
</p><p></p>
Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit.
</p><p></p>
Qualem igitur hominem natura inchoavit?
<!-- ▬▬▬▬▬▬▬ ROW 4 COMMENCES ▬▬▬▬▬▬▬ -->
</p><p></p>
<span class="CRIMB">ORANGUTAN </span>
Cur haec eadem Democritus? Tecum optime, deinde etiam cum mediocri amico. Duo Reges: constructio interrete.</td>
</p><p></p> <!-- STARTS COL-B -->
<span class="CRIMB">ORANGUTAN</span> Quae quidem vel cum periculo est quaerenda vobis; non moveatur et offensione turpitudinis et comprobatione honestatis?
</p><p></p>
Quae quidem vel cum periculo est quaerenda vobis; non moveatur et offensione turpitudinis et comprobatione honestatis?
</p><p></p>
Oratio me istius philosophi non offendit; Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur.</td>
<!-- ▬▬▬▬▬▬▬ ROW 5 COMMENCES ▬▬▬▬▬▬▬ -->
</p><p></p>
<span class="CRIMB">APE </span>
Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis.
</p><p></p>
Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Quid censes in Latino fore?</td>
</p><p></p>
<span class="CRIMB">APE </span> <!-- STARTS COL-B -->
Sed haec nihil sane ad rem; Esse enim quam vellet iniquus iustus poterat inpune. Ut placet, inquit, etsi enim illud erat aptius, aequum cuique concedere.
</p><p></p>
Ut placet, inquit, etsi enim illud erat aptius, aequum cuique concedere.
</p><p></p>
Amicitiam autem adhibendam esse censent, quia sit ex eo genere, quae prosunt.</td>
<!-- ▬▬▬▬▬▬▬ ROW 6 COMMENCES ▬▬▬▬▬▬▬ -->
</p><p></p>
<span class="CRIMB">RHESUS </span>
Sed haec nihil sane ad rem; Esse enim quam vellet iniquus iustus poterat inpune. Ut placet, inquit, etsi enim illud erat aptius, aequum cuique concedere.</td>
</p><p></p> <!-- STARTS COL-B -->
<span class="CRIMB">RHESUS</span> Sed haec nihil sane ad rem; Esse enim quam vellet iniquus iustus poterat inpune.
</p><p></p>
Amicitiam autem adhibendam esse censent, quia sit ex eo genere, quae prosunt.
</p><p></p>
Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit.</td>
<!-- ▬▬▬▬▬▬▬ ROW 7 COMMENCES ▬▬▬▬▬▬▬ -->
</p><p></p>
<span class="CRIMB">MACAQUE</span>
Cur haec eadem Democritus? Tecum optime, deinde etiam cum mediocri amico. Duo Reges: constructio interrete.
</p><p></p>
Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis.</td>
</p><p></p>
<span class="CRIMB">MACAQUE</span> <!-- STARTS COL-B -->
Quae quidem vel cum periculo est quaerenda vobis; non moveatur et offensione turpitudinis et comprobatione honestatis?
</p><p></p>
Quid censes in Latino fore?
</p><p></p>
Oratio me istius philosophi non offendit; Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur.
</p><p></p>```