Trying to eliminate the padding-bottom of ONE table cell

HTML & CSS
21

The gradient hack was offered to me on xxxxtricks but I just don’t like it rp. I’m not doing a damn gradient; keep it simple man. I asked before why the padding and border styles in .LL and .RR are ignored . . .

.COL1, th, td {
    width: 60px;
}

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

.RR {
     border-left: 0;
     white-space: nowrap; 
background-color: YELLOW;
         padding: 5px 5px 0 0;
   margin-bottom: -1px;
}

. . . and have to be repeated twice, inline . . .

        <tr>
            <td colspan="3">&nbsp;</td>
            <td style="padding: 5px 0 0 5px; border-right: 0;">
                <div class="LL">
                    #84D0EF
                </div>
            </td>
            <td style="padding: 5px 5px 0 0; border-left: 0;">
                <div class="RR">
                    YELLOW
                </div>
            </td>
            <td colspan="2">&nbsp;</td>
        </tr>

I’m keeping my .COL1 style but now with a fixed width of 60px because max-width wasn’t working. I doubt this one will work either but we can set it aside for later.

22

semi, the gradient isn’t a “hack”. It is proper, valid CSS doing exactly what it is designed to do. Nothing more, nothing less.

Did you drag the browser window from wide to narrow and back and watch how the colors behave?

Whatever text you enter into the cell is not tied to a particular color. The cell is open full width. Using two divs in the cell gives the impression that you are creating two cells within the one cell yet not considering where the text will go.

Do you have an arguable reason for disliking the gradient background? I’m willing to listen if you have one.

You could create an image with the colors on it and place it in the background. Use the same image in the div so you can pull the color over the bottom border.

I am not prepared to answer your padding and border question.

Would you please revisit my post #18 and identify which one of the 2 “choices” that I offered matches your expectations?

23

[quote=“Erik_J, post:16, topic:310409, full:true”]

Fine Erik. You tell me:
I put the class LL on the < td > Row 4, Column 4?
I put the class LL on the first < div > Row 4, Column 4?
Put it on both?
And where exactly do I put RR?

I’ve asked why I have to duplicate code inline in my most recent post before this one. It would go a long way if someone would first answer that post.

24

Hi there semicolon,

I posted this code three days ago…

<!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>

It includes this section…

    <td colspan="3"></td>
    <td  class="ll">
     <div>#84D0EF</div>
     <div class="rr">YELLOW</div>
    </td>

…which answers your “ll” and “rr” problem.:winky:

coothead

1 Like
25

Ronpat, everyone . . . Please see my post asking why I have to duplicate style information inline. I’m trying to get as much of this into the CSS but the minute I remove that inline border and padding data it’s shot to hell.

Here is Coot’s back-to-back < DIV > CSS —

<!DOCTYPE html>
<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;
}

.COL1, th, td {
    width: 60px;
}

.LL {
     padding-bottom: 0;}

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

.LL .RR {
     background-color: YELLOW;}

</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 class="LL">
            <div>
                #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 colspan="2">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
</body>
</html>

It doesn’t work.

26

I"ll take another look at your original code and try to answer your “inline code” question.

In return, I want a straight answer from you… I posted some code in message #20. In response you ranted about the gradient background. You did not tell me whether the code behaved as you would like it to or not. I would appreciate some useful feedback about the behavior of the page. Your concern about the inline code is valid, but it has no bearing on whether the page that I posted behaves as you wish or not. There are many ways to skin a cat with CSS.

1 Like
27

That is not my code, in any shape or form. :unhappy:

My code produces this…

colon
colon399×203 2.49 KB

coothead

28

(Not specific)

Coothead’s rows have five columns, this one too:

        <tr>
            <td colspan="3"></td>
            <td  class="ll">
                <div>#84D0EF</div>
                <div class="rr">YELLOW</div>
            </td>
            <td></td>
        </tr>

Your rows have six columns, but not this one:

        <tr>
            <td class="LL">
                <div>#84D0EF</div>
                <div class="RR">YELLOW</div>
            </td>
            <td colspan="2">&nbsp;</td>
        </tr>

:wink:

29

You have CSS selectors that are invalid. The inline styles are applying the styles instead of the styles being applied by CSS.

30

Sorry coot, to be honest I’ve had so many versions of this I don’t know who the author was.

31

Two px borders instead of 1px borders should be good for a rant.

<!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>6 cols, borders 2px, Chrome & FF</title>
<!--
https://www.sitepoint.com/community/t/trying-to-eliminate-the-padding-bottom-of-one-table-cell/310409/
semicolon
6 columns
-->
    <style type="TEXT/CSS">
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;  /* border width, style, color */
}
table {
    border-spacing:0 0;
    border-collapse:separate;  /* to emphasize NO {border-collapse:collapse} otherwise unnecessary. */
    font-size:0.875rem;
    margin:0 auto;
}
th, td {
    vertical-align:bottom;
    padding:5px;
}
th:first-child,
td:first-child {
    max-width:60px;  /* max-width works when properly targeted */
}
.left,
.rite {
    white-space:nowrap;  /* DON'T FORGET THIS is HERE waiting to Bite. */
    position:relative;  /* target for white overlay code below */
    padding-bottom:0;
}
.left {
    background-color:#84d0ef;
    border-right-width:0;  /* removes border between cells */
    padding-right:0;  /* removes right padding as requested */
}
.rite {
    background-color:#ff0;
    border-left-width:0;  /* removes border between cells */
    padding-left:0;  /* removes left padding as requested */
}

/* Overlays background-color to give 5px white space around pair of cells */
.left::before,
.rite::before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:auto;
    width:5px;
    background-color:#fff;
}
.rite::before {
    left:auto;
    right:0;
}
.left::after,
.rite::after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:5px;
    background-color:#fff;
}
/* end overlays */

.left div {
    background-color:#84d0ef;
    text-align:right;
}
.rite div {
    background-color:#ff0;
}
/* pulls text (content) divs down over border-bottom */
.left div,
.rite div {
    position:relative;
    padding:5px 5px 7px 5px;  /* padding lifts text to align baseline with other cells (7px would be optimum).  Any of these can be changed or deleted. */
    bottom:-2px;
}
.color1 {
    color:crimson;
}
    </style>
</head>
<body>

<ul>
    <li>v1</li>
    <li>6 columns</li>
    <li>Tested in Chrome and FF .</li>
    <li>{border-collapse:collapse;} NOT used. It has a long history of cross browser inconsistencies.</li>
    <li>{border-spacing:0 0;} eliminates space between borders so borders appear as 2px. (Color them a lighter shade of pale. )</li>
</ul>
<table>
    <tbody>
        <tr>
            <th class="col1">C1</th>
            <th>C2</th>
            <th>C3</th>
            <th colspan="2">C4,C5</th>
            <th>C6</th>
        </tr>
        <tr>
            <td><span class="color1">60px WiderThan60px</span><br>MAX 60px</td>
            <td>TWO TWO</td>
            <td>THREE THREE</td>
            <td colspan="2">FOUR FOUR</td>
            <td>FIVE FIVE</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>&nbsp;</td>
            <td colspan="2">WiderThan60px WiderThan60px</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3">&nbsp;</td>
            <td class="left">
                <div>
                    #84D0EF
                </div>
            </td>
            <td class="rite">
                <div>
                    #ff0
                </div>
            </td>
            <td>WiderThan60px WiderThan60px WiderThan60px</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td colspan="2">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>
<p>Drag the browser window between wide and narrow to test background-color behavior.</p>

</body>
</html>

Feedback requested after testing.

34

I’m not clear what it is you don’t like about markdown. It’s like most things - it takes a little while to get to understand.

35

Sorry to hear that!

It sometimes happen to me too when I’m busy reediting what is not yet posted. But I’m always able to recover what I was typing. Even when the browser crashed on me. :smile:

The content in the edit box is automatically saved in short periods as you type. If you look below the text box you can see a brief note at the right hand that says “saved” when it is.

Next time you get your posting edit disappeared you can recover the last saving:
If the edit box is empty, try press Ctrl+z.
If the edit box is empty but the preview box still show the disappeared text, try copy paste the preview back.
If the edit box is closed, try reload the page.

The reload always restore the lost edit, but then when you submit the post it can get an edited icon because it also had a saved edit in cache.

If I understand correctly. :slight_smile:

1 Like
36

The rant about Markdown is off topic.

Because of a lack of useful feedback, I expect this to be my last submission in this topic. It uses simple gradients to provide the 5px white space instead of the 1999 overlays. (The classnames are intentionally different from those in my last post stirthepot )

<!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>.v6: 6 cols, gradients!</title>
<!--
https://www.sitepoint.com/community/t/trying-to-eliminate-the-padding-bottom-of-one-table-cell/310409/
semicolon
6 columns
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:separate;  /* NOT {border-collapse:collapse} */
    border-spacing:0 0;
    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%);
    position:relative;
    text-align:right;
    white-space:nowrap;
    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%);
    position:relative;
    text-align:left;
    white-space:nowrap;
    border-left:0;
    padding-bottom:0;
    padding-left:0;
}
.ll,.rr {
    background-color:#84d0ef;
    position:relative;
    bottom:-2px;
    padding:2px 2px 7px;  /* 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>6 columns.</li>
    <li>{border-collapse:separate;}</li>
    <li>Simple gradients!</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>
2 Likes
37

I like the gradient approach. True, “gradient” suggests “incremental changes in color from one point to another”, which indeed it can do. But there is nothing saying it can’t be “an abrupt change from one color to another”.

3 Likes
38

Okay, now coot . . . I like how lean this is but it still has the grey border below.

39

Hi there semicolon,

all the table cells have top and bottom borders.:winky:

Which borders, exactly, do you want removed?

coothead

40

ronpat . . . It looks great (I particularly like how flexible it is in the browser! might have to rename it expand-o-ronpat hee hee). I like coot’s for its leanness but that pesky border is still there.

Excluding comments & shortcut’d colors which of your versions accomplishes the least CSS?

41

It’s that border: bottom just below the two color blocks. The two blocks need to be extended vertically 1px to occupy what was their bottom border.

42

Yes even I concede it’s power. Why not call it a gradient and just add code to limit the colors to 2? Yep. It’s in.