Trying to eliminate the padding-bottom of ONE table cell


#63

Hi there semicolon,

This code replicates your OR . . . image…

<!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;
    border-bottom: 0;
 }

.ll div {
    position: relative;
    bottom: 0; /* negative values will move it  lower */
    display: table-cell;
    padding: 0.31em 0 0 0.31em;
    background-color: #84d0ef;
 }

.ll .rr {
    background-color:#ff0;
 }
table tr:last-of-type td:nth-child(4) {
    border-top: 0;
 }
</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


#64

One more change (improvement) in my code.

Presently, it displays a 2px “border” around the cells. It does that because {border-collapse:collapse} was causing a problem in Chrome. Apparently, the combination of absolute positioning in the target cells and {border:collapse:collapse} on the table created the conflict. Now, if you prefer your original 1px border, just change {border:collapse:separate} to {border:collapse:collapse}.

table {
    border-collapse:collapse;  /* changed from {border-collapse:separate} */
    border-spacing:0 0;  /* harmless as is, but can be deleted */
    margin:0 auto;
}

You will also need to change .ll,.rr {bottom:-2px} to .ll, .rr {bottom:-1px}, and change {padding:2px 2px 7px} to {padding:2px 2px 6px} to match the baseline in surrounding boxes.

.ll,.rr {
    background-color:#84d0ef;
    position:relative;
    bottom:-1px;  /* changed from -2px */
    padding:2px 2px 6px;  /* padding-bottom changed from 7px to 6px */
}

#65

Yes coot (u youngster u) you did provide that version earlier. How about the first one?


#66

Just put the borders back?

coothead


#67

I was trying to emphasize in the graphic the option to display the left and right sides of 4/4’s border . . . after the two color blocks have been extended vertically — by 1px — to occupy that space. See rp’s post #36 for an example.


#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 (3.6 KB)

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


#69

Aren’t those padding numbers incorrect? (eg. 1 1 6)


#70

I’ll have to sign off now ronpat & coothead (I’m at the library). Until next time! . . .


#71

Yes, there was an error made when saving the file. Some changes didn’t copy over. I didn’t catch it. Reuploaded the good version. Sorry.


#72

Hi there semocolon,

if the the borders are replaced then…

.ll div {

    bottom: -1px; /* negative values will move it  lower */

 }

…will resolve your problem.

I find it difficult to comprehend why this thread
is now approaching 80 posts in total. :eek:

coothead


#73

I have made one more EDIT to my code in post #68.

Looking back at your original post, the property {white-space:nowrap;} is assigned to a non-existent cell in CSS and inline to R4C4

.CELL9 td DIV {
    white-space: nowrap;

    <tr>
        <td colspan="3">&nbsp;</td>
        <td style="white-space: nowrap">

I believe that assignment was a mistake made before posting here… a faulty attempt to keep the two boxes flush side-by-side. Because I can fathom no useful reason for the property, I have removed it from my code. If I am wrong, it’s easy enough to add it back.


#74

Lots of swings and misses. :baseball: :rolleyes: cat-sm thinking-face


#75

This is Mr. C’s code with all changes and with some Lorem Ipsum added followed by a screen shot.

<!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 {
    position:relative;
    bottom:-1px; /* negative values will move it  lower */
    display:table-cell;
    padding:0.31em 0 0 0.31em;
    background-color:#84d0ef;
}
.ll .rr {
    background-color:#ff0;
}
table tr:last-of-type td:nth-child(4) {
    border-top:1px;
}
</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>LoremIpsum lives here! LoremIpsum lives here!</td>
    <td></td>
   </tr><tr>
    <td colspan="3"></td>
    <td class="ll">
     <div>#84D0EF</div>
     <div class="rr">YELLOW</div>
    </td>
    <td>LoremIpsum lives here! LoremIpsum lives here!</td>
   </tr><tr>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </tbody>
 </table>

</body>
</html>

test-coothead2.html (1.6 KB)

coothead-scr

Hopefully This Helps you describe your requirements more completely.

<aside>
Mr. C., please contact a moderator if you want any of this changed or removed.


#76

Hi there Ron,

thank you for pointing out the error in my code. :winky:

I had not considered the addition of content to the cells. :unhappy:

Not too much problem though, this minor edit should rectify it…

<!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 { 
    position: relative;
    display: table-cell;
    width: 50%;
    padding: 0.31em;
    bottom: -1px; 
    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></td>
    <td></td>
    <td></td>
    <td>Lorem Ipsum lives here! Lorem Ipsum lives here!</td>
    <td></td>
   </tr><tr>
    <td colspan="3"></td>
    <td class="ll">
      <div>#84D0EF</div>
      <div class="rr">Lorem Ipsum lives here!</div>
    </td>
    <td>Lorem Ipsum lives here! Lorem Ipsum lives here!</td>
   </tr><tr>
    <td>Lorem Ipsum lives here! Lorem Ipsum lives here!</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </tbody>
 </table>

</body>
</html>

semicolon.html (1.6 KB)

coothead


#77

Mr.C,

I tried that method of coloring r4c4 early on. It’s content dependent. Remove the “Lorem Ipsum” from the yellow div, restore the short word. Also note that column 1 is supposed to have a max width of 60px per semicolon.

coothead-for-semi-num76

:baseball:

Post 68 works using 6 columns (semicolon didn’t specify that the two cells were supposed to have equal widths… of course, that may change… :baseball:)

post%2368

Semi’s request is almost as challenging as one of @PaulOB’s CSS challenges (regardless of semi’s undecided goalposts). :lol:


#78

Hi there Ron,

if the first td element has a defined width then
the width of it’s column is also defined.

To make the first td element of the last row wider
than the column width requires the reduction in
the number of td elements in that row.

<!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;
    background-color: #f9f9f9;
 }

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

th,td {
    padding: 0.32em;
 }

.max {
    width: 3.75em;
}
.max span{
    color: #e6143c;
 }

.ll { 
    padding-bottom: 0;
 }

.ll  div { 
    position: relative;
    display: table-cell;
    width: 50%;
    padding: 0.31em;
    bottom: -1px; 
    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 class="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 colspan="3"></td>
    <td class="ll">
      <div>#84D0EF</div>
      <div class="rr">Lorem Ipsum lives here!</div>
    </td>
    <td>Lorem Ipsum lives here! Lorem Ipsum lives here!</td>
   </tr><tr>
    <td class="max" colspan="2">Lorem Ipsum lives here! Lorem Ipsum lives here!</td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </tbody>
 </table>

</body>
</html>

coothead


#79

Useful point. He may only want the top left cell to have a defined width. I had assumed that it applied to the full column (as you stated) except row4 where he applied colspan=“3” to the first cell therefore it properly ignored the width property. But maybe he plans to add colspans to other first cells also (as you just demonstrated).

To round out your explanation, he would need to apply colspan=“value gt 1” to the first cell to account for 5 cells per row. The width will depend on the sum of the widths of the columns spanned smile

 
Using the default table-layout:auto algorithm, table-cell widths are “starting points” at best. They will auto-adjust as needed to allow content to fit in the matrix of the table. Used sparingly, cells do seem to honor “max-width” if they can. The layout may “break” if they can’t.

The problem with the nested table-cell approach is simply that the anonymous table around the cells has no definable width and height with which the cells associate. I could not think of a way to give it 100% w and h dimensions. If there is some new magic in the wings that allows that to be done, then the nested cells will adapt to its dimensions. The same problem would exist if an element with display:table surrounded the cells, so it’s not just the anonymous table.


#80

:stuck_out_tongue_winking_eye: Here I am . . .

Back From the Dead

Looks like there’s been activity! So give me an hour and we’ll see what kind of trouble we can get into.

Edit:

Okay, it’s coming back to me! Look at my post #58 . . . I was comparing the two versions re: that bottom border, and (not to be greedy) I wanted to achieve both styles to compare them. I’m sorry Ron, Coot, please believe me I don’t intend to keep “moving the goalpost!” What’s really helpful is your >>naming the code bits (eg. coot99, coot98, rp93, rp94 etc.).


#81

Not in my code, we didn’t. :shifty:


#82

Hi there semicolon,

Now that you have returned to this thread, I will now
draw your attention to my actual views about it. :winky:

  1. You have not indicated any genuine tabular data for this project.
    This, to my mind, is akin to “putting the cart before the horse”. :wonky:
  2. I don’t really believe in messing about with tabular data; it should
    just be presented in as simple and logical way as possible and
    definitely without any of that “arty farty” messing about. :unhappy:

coothead