Preamble: On general principles, I believe any approach of the following type:
- markup has to look like this
- this language or technique is allowed, and the other is not
... is flawed.
Web is a matter of presenting content.
Whatever technology is used behind the scenes is completely irrelevant. The only thing that matters is the result: the end user experience, the market share of browsers/devices supporting the solution and, ultimately, the success of the product/code (it's a matter of effort vs results).
This should be the only argument.
Let's look at this from a practical point of view:
You want the functionality of a <table>, which is pretty neat: it automatically adjusts the width of all cells in a column, based on content. On the fly. Of course, that's at the cost of tables being incredibly slow, compared to anything else. And that's why they should be avoided and only used when you really need this auto-width magic and you don't need responsiveness. By the way: nowadays, not having responsive content costs you a lot: Google detects it and they decide your content is not suited for touch/narrow devices and, just for this reason, drop you in the search results of any such devices (and, guess what - they're more than 50% of traffic!).
But, wait: you throw all of the auto-width magic away and fix your cell width at 50%. Which means it doesn't (technically) make any sense to use <table>s at all here. You can easily achieve this layout (including the fixed header) using <div>s, your page will be much faster and you'll also have more options for responsiveness. The only quite minor advantage of tables here is having border-collapse. But that's easily achievable using a negative margin equal to border-width on :not(:first-child) or on :first-childon the "cells".
For the sake of argument, here's how I'd do it (as a homework exercise):
.wrapper {
max-height: 150px;
overflow-y: auto;
display: inline-block;
padding-top: 19px;
}
table {
width: 100vw;
border-collapse: collapse;
}
th, td {
width: 50%;
}
thead tr{
position:fixed;
width: 100vw;
overflow: hidden;
color: #fff;
background: #000;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
top: 0;
height: 18px;
border-bottom: 1px solid #fff;
}
tbody {
background: pink;
overflow: auto;
}
th,
td {
padding: 0;
text-align: left;
vertical-align: top;
border-left: 1px solid #fff;
}
body {
margin: 0;
overflow-x: hidden
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1, Row 1</td>
<td>Cell 2, Row 1</td>
</tr>
<tr>
<td>Cell 1, Row 2</td>
<td>Cell 2, Row 2 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>Cell 1, Row 3</td>
<td>Cell 2, Row 3</td>
</tr>
<tr>
<td>Cell 1, Row 4</td>
<td>Cell 2, Row 4</td>
</tr>
<tr>
<td>Cell 1, Row 5</td>
<td>Cell 2, Row 5</td>
</tr>
<tr>
<td>Cell 1, Row 6</td>
<td>Cell 2, Row 6</td>
</tr>
<tr>
<td>Cell 1, Row 7</td>
<td>Cell 2, Row 7</td>
</tr>
<tr>
<td>Cell 1, Row 8</td>
<td>Cell 2, Row 8</td>
</tr>
<tr>
<td>Cell 1, Row 9</td>
<td>Cell 2, Row 8</td>
</tr>
<tr>
<td>Cell 1, Row 10</td>
<td>Cell 2, Row 10</td>
</tr>
<tr>
<td>Cell 1, Row 11</td>
<td>Cell 2, Row 11</td>
</tr>
<tr>
<td>Cell 1, Row 12</td>
<td>Cell 2, Row 12</td>
</tr>
</tbody>
</table>
</div>
But, in reality, given you don't care about cells auto-adjusting width based on the rest of their column siblings, the only solution that makes sense technically and performance wise is <div>s (regardless of what you put inside it).
Which means I would try to make it clear this is costing you real money (your page is sluggish on x % of target devices - driving your clients away to another website, which probably uses something that's technically sound. Is it a <table>? Most, if not all of your clients, will say it's a table. A smooth one, for a change.
.table {
width: 100vw;
padding-top: 19px;
position: relative;
}
.thead >div >span, .tbody>div > span {
width: 50%;
}
.thead:after {
position: absolute;
background: black;
content: '';
width: 17px;
height: 18px;
right: 0;
top: 0;
}
.thead > div{
position:fixed;
width: 100vw;
max-width: 100%;
color: #fff;
background: #000;
display: flex;
top: 0;
height: 18px;
border-bottom: 1px solid rgba(255,255,255,.65);
overflow-y: scroll;
overflow-x: hidden;
}
.tbody{
background: pink;
display: flex;
flex-direction: column;
overflow-y: scroll;
max-height: 150px;
}
.tbody > div {
display: flex;
flex: 1 0 auto;
border-bottom: 1px solid rgba(255,255,255,.21);
}
.tbody > div> span, .thead>div>span {
flex: 0 0 50%;
padding: 0;
text-align: left;
}
.thead > div > span:not(:first-child) ,
.tbody > div > span:not(:first-child) {
margin-left: -1px;
border-left: 1px solid rgba(255,255,255,.21);
}
body {
margin: 0;
overflow-x: hidden
}
<div class="table">
<div class="thead">
<div>
<span>Header 1</span>
<span>Header 2</span>
</div>
</div>
<div class="tbody">
<div>
<span>Cell 1, Row 1</span>
<span>Cell 2, Row 1</span>
</div>
<div>
<span>Cell 1, Row 2</span>
<span>Cell 2, Row 2 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</span>
</div>
<div>
<span>Cell 1, Row 3</span>
<span>Cell 2, Row 3</span>
</div>
<div>
<span>Cell 1, Row 4</span>
<span>Cell 2, Row 4</span>
</div>
<div>
<span>Cell 1, Row 5</span>
<span>Cell 2, Row 5</span>
</div>
<div>
<span>Cell 1, Row 6</span>
<span>Cell 2, Row 6</span>
</div>
<div>
<span>Cell 1, Row 7</span>
<span>Cell 2, Row 7</span>
</div>
<div>
<span>Cell 1, Row 8</span>
<span>Cell 2, Row 8</span>
</div>
<div>
<span>Cell 1, Row 9</span>
<span>Cell 2, Row 8</span>
</div>
<div>
<span>Cell 1, Row 10</span>
<span>Cell 2, Row 10</span>
</div>
<div>
<span>Cell 1, Row 11</span>
<span>Cell 2, Row 11</span>
</div>
<div>
<span>Cell 1, Row 12</span>
<span>Cell 2, Row 12</span>
</div>
</div>
</div>
Most people, when thinking tabular data, automatically picture Excel. Of all products, you'd think MS Excel online is the one place where <table>s make sense, right? Turns out they're too slow and using absolutely positioned <div>s provides a better user experience.
But maybe MS are not the best example, after all, they did lose the browser wars, right? Let's look at Google Sheets. You've guessed it: they're Google <div>s.
