Trying to eliminate the padding-bottom of ONE table cell

Okay, I know when I’m whipped. First, here’s what this should look like:

NO%20BOTTOM

I’ve tried just about everything, and I’m p’d off I couldn’t work this out for myself. :angry: You would think splitting a lousy table cell in two, giving each a background color and dropping its bottom padding would be simple. I’ve float'd. I’ve DIV'd. I’ve display:____ (take your pick). I’ve box-sized, white-space'd, vertical-align'd, and to my everlasting shame, position: absolute'd. Thank you for any help (yes Paul, I’ve tidied it).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<html>
<head>
    <meta name="generator" content=
    "HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>ONE CELL, SPLIT w/TWO COLORS IN THE BACKGROUND + &#9654;NO PADDING/MARGIN BOTTOM</title>

<style type="TEXT/CSS">
                                                                
    body {
         font-size: 12px;
         line-height: 13px;
         font-family: LUCIDA CONSOLE, Bold, MONOSPACE;
         margin-left: 20px;
         margin-right: 20px;
         margin-top: 50px;
         margin-bottom: 10px;
         width: 100%;
    }

    TABLE, th, td {
         padding: 5px;
         width: AUTO;
         vertical-align: BOTTOM;
         font-size: 12px;
         line-height: 13px;
         font-family: LUCIDA CONSOLE, Bold, MONOSPACE;
         border: 1px solid DARKGREY;
         border-collapse: collapse;
    }

    td div {
    display: table-cell;
    box-sizing: border-box;
    vertical-align: bottom;
    }

    .COL1 th td {
    max-width: 60px;
    }

    .CELL9 td DIV {
    white-space: nowrap;
    display: table-cell;
    box-sizing: border-box;
    vertical-align: bottom;
    }

    .LL td DIV {
    padding: 5px 0px 0px 5px;
    background-color: #84D0EF;
    }

    .RR td div {
    padding: 5px 5px 0px 0px;
    background-color: YELLOW;
    }

</style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <th class="COL1">C1</th>

                <th>C2</th>

                <th>C3</th>

                <th>C4</th>

                <th>C5</th>
            </tr>

            <tr>
                <td><font color="crimson">60px</font><br>
                MAX</td>

                <td>TWO TWO</td>

                <td>THREE THREE</td>

                <td>FOUR FOUR</td>

                <td>FIVE FIVE</td>
            </tr>

            <tr>
                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>
            </tr>

            <tr>
                <td colspan="3">&nbsp;</td>

                <td style="white-space: nowrap">
                    <div class="LL">
                        #84D0EF
                    </div>

                    <div class="RR">
                        YELLOW
                    </div>
                </td>

                <td colspan="2">&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

Hi there semicolon,

does this help…

table tr:nth-of-type(4) td:nth-of-type(2) {
    padding-bottom: 0;
 }

table tr:nth-of-type(4) td:nth-of-type(2) div:nth-of-type(1) {
    padding: 5px 0 0 5px;
    background-color:#84d0ef;
 }

table tr:nth-of-type(4) td:nth-of-type(2) div:nth-of-type(2) {
    padding: 5px 0 0 5px;
    background-color:#ff0;
 }

coothead

I’ll try it coothead but . . . look I just don’t understand why I can’t have simple, perfectly good “background color” language. Why the hell is it so hard to split a lousy cell? Your nth-of-type code . . . it’s cryptic! How would I ever relate this code with bottom padding?!?!

Vanity, Vanity. All is Vanity . . .

I can’t speak for you, but for me, well, I can do it without thinking. :winky:

The secret is the four "p"s…

  • Practice, practice, practice, then…
  • practice some more. :biggrin:

coothead

There isn’t something with the words background color and padding somewhere? I’ll have to Comment the sh*t out of this because I’ll never relate it to a couple of cells with background colors. WTF . . .

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>ONE CELL, SPLIT w/TWO COLORS IN THE BACKGROUND + &#9654;NO PADDING/MARGIN BOTTOM</title>
    <style type="TEXT/CSS">
                                                                
body {
     font-size: 12px;
     line-height: 13px;
     font-family: LUCIDA CONSOLE, Bold, MONOSPACE;
     margin-left: 20px;
     margin-right: 20px;
     margin-top: 50px;
     margin-bottom: 10px;
     width: 100%;
}
TABLE, th, td {
     padding: 5px;
     width: AUTO;
     vertical-align: BOTTOM;
     font-size: 12px;
     line-height: 13px;
     font-family: LUCIDA CONSOLE, Bold, MONOSPACE;
     border:1px solid DARKGREY;
     border-collapse: collapse;
}
/*
td div {
    display: table-cell;
    box-sizing: border-box;
    vertical-align: bottom;
}
*/
.COL1 th td {
    max-width: 60px;
}
/*
.CELL9 td DIV {
    white-space: nowrap;
    display: table-cell;
    box-sizing: border-box;
    vertical-align: bottom;
}
*/
.LL {
    padding: 5px 0px 0px 5px;
    background-color: #84D0EF;
}

.RR {
    padding: 5px 5px 0px 0px;
    background-color: #ff0;
}
    </style>
</head>
<body>
<table>
    <tbody>
        <tr>
            <th class="COL1">C1</th>
            <th>C2</th>
            <th>C3</th>
            <th colspan="2">C4</th>
            <th>C5</th>
        </tr>
        <tr>
            <td><font color="crimson">60px</font><br>
            MAX</td>
            <td>TWO TWO</td>
            <td>THREE THREE</td>
            <td colspan="2">FOUR FOUR</td>
            <td>FIVE FIVE</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td colspan="2">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3">&nbsp;</td>
            <td style="white-space:nowrap; padding:4px 0 0 5px; border-right:0;">
                <div class="LL" style="margin-bottom:-1px;">
                    #84D0EF
                </div>
            </td>
            <td style="white-space:nowrap; padding:4px 5px 0 0; border-left:0;">
                <div class="RR" style="margin-bottom:-1px;">
                    YELLOW
                </div>
            </td>
            <td colspan="2">&nbsp;</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>

Move the inline styles up to the CSS portion of your page. They are not meant to stay inline.

semicolon-table-cells

Ronpat, by “move the inline” suggestion did you already do it for me? Also (and I’m not complaining) the border is visible (in Chrome).

Add position:relative as shown:

        <tr>
            <td colspan="3">&nbsp;</td>
            <td style="white-space:nowrap; padding:4px 0 0 5px; border-right:0;">
                <div class="LL" style="margin-bottom:-1px; position:relative;">
                    #84D0EF
                </div>
            </td>
            <td style="white-space:nowrap; padding:4px 5px 0 0; border-left:0;">
                <div class="RR" style="margin-bottom:-1px; position:relative;">
                    YELLOW
                </div>
            </td>
            <td colspan="2">&nbsp;</td>
        </tr>

No. I added more inline CSS (all should be moved to the CSS section at the top of the page.)

Hi there semicolon.

I just provided CSS for the HTML that you provided.

If you change this…

                <td style="white-space: nowrap">
                    <div class="LL">
                        #84D0EF
                    </div>

                    <div class="RR">
                        YELLOW
                    </div>
                </td>

…to this…

                <td  class="LL">
                    <div>
                        #84D0EF
                    </div>

                    <div class="RR">
                        YELLOW
                    </div>
                </td>

…then you can use this CSS…

.LL {
    padding-bottom: 0;
 }

.LL div {
    padding: 5px 0 0 5px;
    background-color: #84d0ef;
 }

.LL .RR {
    background-color:#ff0;
 }

coothead

Edit: It works.

Let me study this and get back to you. BTW, that border still shows.

That is in fact my preferred code. It doesn’t work. And it kills me because look at how light & elegant it is! It’s up there in the graveyard that is my lead post of everything that didn’t work. There may actually be less coding to just put another table inside the < td >s. If that isn’t pathetic I don’t know what is. It’s a sad sad day when even a table looks better than the volume of CSS expended just to split a damn cell in two and remove its bottom padding.

Who had negative margin? Ronpat?

No. I added more inline CSS (all should be moved to the CSS section at the top of the page.)

Okay, I’ll try it and report back.

So Coot, you’re jamming a bunch of LLs together, effectively making it impossible for the cells to wrap? heh heh. Diabolical. I like it.

Hi there semicolon,

as you were having problems with your code,
I thought that I would correct an validate it. :winky:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>code corrected an validated</title>

<style media="screen">
 body {
    margin: 3.12em 1.25em 0.62em 1.25em;
    font: normal 100% / 162% 'Lucida Console', monospace;
 }

table, th, td {
    border: 1px solid #a9a9a9;
    border-collapse: collapse;
    vertical-align: bottom;
    font-size: 0.9em;
 }

th,td {
    padding: 0.32em;
 }

#max span{
    color: #e6143c;
 }

.ll {
    padding-bottom: 0;
 }

.ll div {
    display: table-cell;
    padding: 0.31em 0 0 0.31em;
    background-color: #84d0ef;
 }

.ll .rr {
    background-color:#ff0;
 }
</style>
</head>

<body>
 <table>
  <thead>
   <tr>
    <th>C1</th>
    <th>C2</th>
    <th>C3</th>
    <th>C4</th>
    <th>C5</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td id="max"><span>60px</span><br>MAX</td>
    <td>TWO TWO</td>
    <td>THREE THREE</td>
    <td>FOUR FOUR</td>
    <td>FIVE FIVE</td>
   </tr><tr>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr><tr>
    <td colspan="3"></td>
    <td  class="ll">
     <div>#84D0EF</div>
     <div class="rr">YELLOW</div>
    </td>
    <td></td>
   </tr><tr>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </tbody>
 </table>

</body>
</html>

coothead

1 Like

Ronpat, please explain why I can’t put all of the < TD > styling in CSS. If I remove any of the inline styling from either of the two TDs —
LEFT
<td style="padding: 4px 0 0 5px; border-right: 0;">
RIGHT
<td style="padding: 4px 5px 0 0; border-left: 0;">

. . . they fallback to the global padding et al.

.LL {
border-right: 0;
padding: 5px 0 0 5px;
background-color: #84D0EF;
margin-bottom: -1px;
white-space:  nowrap; 
}

.RR {
border-left: 0;
padding: 5px 5px 0 0;
background-color: YELLOW;
margin-bottom: -1px;
white-space: nowrap; 
}
<tr>                                                   
    <td colspan="3">&nbsp;</td>                        
    <td style="padding: 4px 0 0 5px; border-right: 0;">
        <div class="LL">                               
            #84D0EF                                    
        </div>                                         
    </td>                                              
    <td style="padding: 4px 5px 0 0; border-left: 0;"> 
        <div class="RR">                               
            YELLOW                                     
        </div>                                         
    </td>                                              
    <td colspan="2">&nbsp;</td>                        
</tr>

Hi semicolon,

Because the class name is on the div. :slight_smile:

Check out how @coothead moved both the inline style and the class name.

We never received any closing feedback from you, so here is another version that works reasonably well in Firefox and Chrome at least.

<!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>
<!--
https://www.sitepoint.com/community/t/trying-to-eliminate-the-padding-bottom-of-one-table-cell/310409/
semicolon
Preserves 5 columns
Changes doctype and head to HTML5
-->
    <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 {
     font-size:.75rem;
     padding: 5px;
     vertical-align: BOTTOM;
     font-family: LUCIDA CONSOLE, Bold, MONOSPACE;
     border:1px solid DARKGREY;
     border-collapse: collapse;
}
th:first-of-type, td:first-of-type {
    max-width:60px;
}
.c4r4 {
    white-space:nowrap;
    padding:4px 5px 0 5px;
}
.LL,.RR {
    display:table-cell;
    background-color:#84d0ef;
    position:relative;
    bottom:-1px;
    padding:0.3125rem .25rem 0.0625rem;
}
.RR {
    background-color:#ff0;
}
.color1 {
    color:crimson;
}

    </style>
</head>
<body>
<table>
    <tbody>
        <tr>
            <th>C1</th>
            <th>C2</th>
            <th>C3</th>
            <th>C4</th>
            <th>C5</th>
        </tr>
        <tr>
            <td><span class="color1">60px WiderThan60px</span><br>MAX</td>
            <td>TWO TWO</td>
            <td>THREE THREE</td>
            <td>FOUR FOUR</td>
            <td>FIVE FIVE</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3">&nbsp;</td>
            <td class="c4r4">
                <div class="LL">
                    #84D0EF
                </div>
                <div class="RR">
                    yellow
                </div>
            </td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
</body>
</html>

I changed the doctype and head from HTML4 to HTML5 just because I could. Change it back if you wish.

EDIT: The behavior is not quite good enough, yet. A little more dabbling should do it, though. (apologies to Brylcreem)

3 Likes

@semicolon,

I would like to clairfy something before posting another attempt. The title clearly says “one cell w/two colors in the background”, but the code suggests that there would be two words in the cell that are center aligned AND that the colors would meet where where the center-aligned words meet.

(1a) If two words were displayed in one cell with two colors in the background, it is unlikely that the words would meet where the colors change.

(1b) If only one word were displayed in one cell with two colors in the background, it would overlap both colors.

(2) Assuring that the colors meet at the point where the two words meet requires two cells and if the words are different lengths then the colors probably will be different widths.

Please specify whether the colors in the background are independent from the words (choice 1) or are the colors are supposed to meet where two words meet (choice 2).

1 Like

Ronpat . . . those two color codes are just place holders which I may or may not fill with text. What is important is that they must be background colors. Sorry for confusion.

Try this, semi.

<!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>
<!--
https://www.sitepoint.com/community/t/trying-to-eliminate-the-padding-bottom-of-one-table-cell/310409/
semicolon
Changes doctype and head to HTML5
5 columns, 1 cell with two background colors, w/5px space top, right, left sides, colors overlap border-bottom.
Tested in FF and Chrome.
-->
    <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 {
    border-spacing:1px 1px;
    background-color:#a9a9a9;
    font-size:0.75rem;
    margin:0 auto;
}
th, td {
    vertical-align:bottom;
    background-color:#fff;
    padding:5px;
}

th:first-of-type,
td:first-of-type {
    max-width:60px;
}
.c4r4 {
    white-space:nowrap;
    position:relative;
    background-color:#fff;
    background-image:linear-gradient(to right, #fff 0, #fff 5px, #84d0ef 5px, #84d0ef 50%, #ff0 50%, #ff0 calc(100% - 5px), #fff calc(100% - 5px), #fff 100%);
    text-align:center;
    padding-bottom:0;
}
.c4r4::after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background-color:#fff;
}
.c4r4 div {
    position:relative;
    bottom:-1px;
    background-image:linear-gradient(to right, #84d0ef 0px, #84d0ef 50%, #ff0 50%, #ff0 100%);
    padding-bottom:6px;
}
.color1 {
    color:crimson;
}

    </style>
</head>
<body>
<table>
    <caption>v4: 1 cell. background colors tested in FF and Chrome</caption>
    <tbody>
        <tr>
            <th>C1</th>
            <th>C2</th>
            <th>C3</th>
            <th>C4</th>
            <th>C5</th>
        </tr>
        <tr>
            <td><span class="color1">60px LongerThan60px</span><br>MAX 60px</td>
            <td>TWO TWO</td>
            <td>THREE THREE</td>
            <td>FOUR FOUR</td>
            <td>FIVE FIVE</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>LongerThan60px LongerThan60px</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3">&nbsp;</td>
            <td class="c4r4">
                <div>
                    #84d0ef #ff0
                </div>
            </td>
            <td>LongerThan60px LongerThan60px LongerThan60px</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
</body>
</html>