Trying to eliminate the padding-bottom of ONE table cell

HTML & CSS
68

Once again… All recent changes have been added.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
    <!--title>ONE CELL, SPLIT w/TWO COLORS IN THE BACKGROUND + &#9654;NO PADDING/MARGIN BOTTOM</title-->
    <title>v7: 6 cols, gradients, 1px borders</title>
<!--
https://www.sitepoint.com/community/t/trying-to-eliminate-the-padding-bottom-of-one-table-cell/310409/
semicolon
6 columns
gradient background images
border-collapse:collapse restored
Changes doctype and head to HTML5
Tested in Chrome and FF.
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
body {
    font-size:1rem;
    font-family:"Lucida Console Bold", monospace;
    margin:50px 20px 10px 20px;
}
table,th,td {
    border:1px solid #ccc;
}
table {
    border-collapse:collapse;  /* changed from {border-collapse:separate} */
    border-spacing:0 0;  /* harmless but can be deleted */
    margin:0 auto;
}
th, td {
    background-color:#fff;
    vertical-align:bottom;
    font-size:.75rem;
    font-family:"lucida console bold", monospace;
    padding:5px;
}
th:first-child,
td:first-child {
    max-width:60px;
}
.r4c4 {
    background-color:#84d0ef;
    background-image:
        linear-gradient(to bottom, #fff 0, #fff 5px, transparent 5px, transparent 100%),
        linear-gradient(to right, #fff 0, #fff 5px, transparent 5px, transparent 100%);
    text-align:right;
    border-right:0;
    padding-bottom:0;
    padding-right:0;
}
.r4c5 {
    background-color:#ff0;
    background-image:
        linear-gradient(to bottom, #fff 0, #fff 5px, transparent 5px, transparent 100%),
        linear-gradient(to left, #fff 0, #fff 5px, transparent 5px, transparent 100%);
    text-align:left;
    border-left:0;
    padding-bottom:0;
    padding-left:0;
}
.ll,.rr {
    background-color:#84d0ef;
    position:relative;
    bottom:-1px;
    padding:2px 2px 6px;  /* padding added in spite of your "no padding" requirement.  change to suit. */
}
.rr {
    background-color:#ff0;
}
.color1 {
    color:crimson;
}

    </style>
</head>
<body>

<ul>
    <li>v6:</li>
    <li>HTML5 doctype</li>
    <li>6 columns.</li>
    <li>{border-collapse:collapse;}</li>
    <li>Simple gradients!</li>
    <li>1px borders</li>
    <li>Tested in Chrome and FF.</li>
</ul>
<table>
    <tbody>
        <tr>
            <th>C1</th>
            <th>C2</th>
            <th>C3</th>
            <th colspan="2">C4,C5</th>
            <th>C6</th>
        </tr>
        <tr>
            <td><span class="color1">60px LongerThan60px</span><br>MAX 60px</td>
            <td>TWO TWO</td>
            <td>THREE THREE</td>
            <td colspan="2">FOUR,FIVE</td>
            <td>SIX SIX</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td colspan="2">LongerThan60px LongerThan60px</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3">&nbsp;</td>
            <td class="r4c4">
                <div class="ll">
                    #84d0ef
                </div>
            </td>
            <td class="r4c5">
                <div class="rr">
                    yellow
                </div>
            </td>
            <td>LongerThan60px LongerThan60px LongerThan60px</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td colspan="2">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

</body>
</html>

(so you don’t have to copy and paste the code)

split-a-table-cell-v7=ronpat.html|attachment (3.6 KB)

Looks like this in FF and Chrome:
split-a-table-cell-v7