table with divs

by Emanuele del Grande

HTML

<div class="logo">
    <span>CSS</span> <span>Table</span>
    <div>Pure-CSS DIVs table</div>
</div>
<p>CSS DIVs table, auto-wrapping content of longer cells.<br />
Cells with content wrapped in <code>&lt;div class="cell-wrapper"&gt;&lt;/div&gt;</code> adapt to other cells automatic height and display scrollbars if the content overcomes the main content height.
</p>

<div class="table">
    <div class="tr">
        <div class="th">
            Monday
        </div>
        <div class="th">
            Tuesday
        </div>
        <div class="th">
            Wednesday
        </div>
        <div class="th">
            Thursday
        </div>
        <div class="th">
            Friday
        </div>
        <div class="th">
            Saturday
        </div>
        <div class="th">
            Sunday
        </div>
    </div>
    <div class="tr">
        <div class="td">
            17:00-20:00
        </div>
        <div class="td">
            17:00-20:00
        </div>
        <div class="td">
            17:00-20:00
        </div>
        <div class="td">
            17:00-20:00<br />
            <b>CET time</b>
        </div>
        <div class="td">
            <div class="cell-wrapper">
                17:00-20:00<br />
                Long text to test table cell overflow.
                Long text to test table cell overflow.
            </div>
        </div>
        <div class="td">

        </div>
        <div class="td">
        </div>
    </div>
    <div class="tr">
        <div class="td">
        </div>
        <div class="td">
        </div>
        <div class="td">
        </div>
        <div class="td">
        </div>
        <div class="td">
        </div>
        <div class="td">
        </div>
        <div class="td">
            Long text to test table cell overflow.
            Long text to test table cell overflow.
        </div>
    </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
  --font-color: #444;
  --font-family: Inter, Roboto, Arial, Helvetica;
  --font-size: 14px;
  --font-weight: 300;
  --letter-spacing: -0.5px;
  --main-color: #607f8b; /* #4ae */
  --inner-border-width: 1px;
  --border-color: #ddd;
  --v-padding: 10px;
}


/* GENERIC STYLE */
*, *:before, *:after { margin; 0; padding: 0; box-sizing: border-box; outline: none; }
html, body {
    font: 14px var(--font-family); color: var(--font-color); line-height: 1.4em;
    font-weight: var(--font-weight); letter-spacing: var(--letter-spacing);
}
.logo { font: 42px var(--font-family); margin: 0; padding: 10px 0 0 20px; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.logo span:first-child {
    position: relative; top: 0; left: 0; padding: 0 13px 0 10px; color: var(--main-color); background: var(--main-color); color: #fff;
    clip-path: ellipse(100% 125% at 100% 50%); z-index: 1;
}
.logo span:nth-child(2) { position: relative;top: 0; left: 0; margin: 0 0 0 -13px; background: transparent; z-index: 2; }

.logo div { font: 12px var(--font-family); padding: 0 0 0 70px; letter-spacing: -0.5px; }


/* SPECIFIC LAYOUT: */
:root {
    --table-cell-padding: 7px;
    --table-font-family: Inter, Roboto, Arial, Helvetica;
    --table-font-size: 12px;
}

*, :after, :before {
    box-sizing: inherit;
}
.table {
    display: table;
    table-layout: fixed;
    text-align: center;
    font-size: .9rem;
    line-height: 1.2em;
    border-collapse: collapse;
    font-size: var(--table-font-size);
    font-family: var(--table-font-family);
}

.table .tr {
    display: table-row;
}

.table .td, .table .th, .table .tr {
    background: #fff;
    vertical-align: middle;
    border: 1px solid #777;
}

.table .td, .table .th {
    display: table-cell;
    position: relative;
    top: 0; left: 0;
    width: 105px;
    height: 20px;
    overflow: hidden;
    padding:...