Styling a table with one column "popping out" while preserving semantically correct markup

Question

I want to create a table with the following look:

At first it might look easy, but it's actually not:

• The background image is tricky since it spans over several elements with no common parent
• Table cells must have abnormal sizes, which tables don't usually like
• The hover overlay must exclude the part of the column that sticks out

---

Here is a base fiddle you can use to test. It contains the basic markup + styles for the table. Everything without the abnormal table cells and hover effect.

I'm using the :before pseudo element in td to create the blue background and the :after to create the 0.5 opacity image with multiply blending mode.

I offset the background image in each table cell via background-position. The first cell has 0 offset, the second one has 100%, third one 200% etc. They seamlessly align alright.

What I've tried

I forked the above fiddle, trying to make it visually correct. I almost made it. Here's the result. There are problems, though:

• I created the hover effect via an :after pseudo element in the tr element. However, that required me to make the element have a block display (because elements with display table-row can't have pseudo elements apparently). This means that if the cells don't have min-width or they simply have more content, all columns would be misaligned and the table wouldn't look like a table. Can be seen in the fiddle.
• Because I use percentage based offset in background-position for each table cell's background, having a single cell slightly larger or smaller ruins the alignment of the background image since that percentage is based on the size of the element itself and not on those before it. In the fiddle, you can clearly see that background image is just thrashed.

Question

You can obviously do that very easy with 4 elements next to each other and some JavaScript for the hover effect perhaps. However, is it possible to create this layout while preserving a semantically correct table markup? I.E. using a <table> element.

---

Feel free to use this fiddle for testing.

Answer 1

I have kept your layout as is, I only added a wrapper

On the other side, the special popping out column is made only with an pseduo element. This way, I can adjust to the top, but not to the bottom. That's why the container is needed, to cut the bottom of the pseudo.

The shadows in the bottom need a little adjustment, but otherwise I think that the result is ok.

.container {
    margin: 20px;
    overflow: hidden;
}

table {
    margin: 10px 10px 20px 10px;
    background: #F0F6F7;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.16);
    border-radius: 5px;
    border-collapse: collapse;
}


tr:hover td {
    background: rgba(255, 0, 0, 0.2);
}

tr + tr td, tr + tr td.pop:before {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}


tr:first-child .pop:after, tr:first-child .pop:before {
    top: -10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

tr:last-child .pop:after, tr:last-child .pop:before {
}

td {
    min-width: 150px;
    box-sizing: border-box;
    padding: 16px 10px 15px 10px;
    color: #787878;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    text-align: center;
}

td + td {
    border-left: 1px solid rgba(0, 0, 0, 0.05);
}

td.pop {
    position: relative;
    z-index: 0;
    color: #FFF;
}

td.pop, td.pop + td {
    border-left: none;
}

tr:first-child td.pop:after {
    content: '';
    position: absolute;
    top: -10px;
    right: 0;
    left: 0;
    z-index: -2;
    background: url('https://i.imgur.com/lcKmrnE.jpg')  #539BFC;
    background-blend-mode: screen;
    opacity: 0.75;
    height: 1000%;
}

tr:last-child td.pop:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    z-index: -1;
    height: 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 2px 2px 2px 0px lightgray, 0px 10px 0px 10px white;
}

<div class="container">
<table>
    <tbody>
        <tr><td>Josh</td><td class="pop">3 BTC</td><td>$46,343</td><td>27/12/17</td></tr>
        <tr><td>Anne</td><td class="pop">2 BTC (veeery big cell)</td><td>$38,452</td><td>26/12/17</td></tr>
        <tr><td>Jack</td><td class="pop">6 BTC<br><small>bigger</small></td><td>$126,989</td><td>26/12/17</td></tr>
        <tr><td>Gyumur</td><td class="pop">0.7 BTC</td><td>$14,104</td><td>24/12/17</td></tr>
        <tr><td>Boggy</td><td class="pop">12 BTC</td><td>$267,766</td><td>21/12/17</td></tr>
    </tbody>
</table>
</div>