Applying CSS styles to specific Table Columns, Rows, and Cells

[semicolon]

Here you can see a SCREENSHOT of what I want the page to look like.
Here you can access my pathetic attempt at CODING this HTML file.

Begin with the SCREENSHOT or my mangled code will give you something very different from what I want!

The four CSS styles I am trying to apply to the table are:
1. IPSO ___ 2. FACTO ___ 3. JOINED ___ and 4. GHOST

I gather you don’t want code/images here so if the two download links above are unacceptable you can delete the thread. I don’t do Codepen.

[Beverleyh]

I don’t do Codepen.

Hmmmm, whyever not? It’s free and you don’t need an account.

There are other alternatives too such as JSFiddle and JSBin. Also free and no sign-up required.

We prefer these platform because of the live editing properties that they provide us with, which we can use on any device, not just desktops. Code dumps are limiting – We can’t do much to see the working problem until we recreate web pages or live playground demos on your behalf. You’re more likely to get a helpful response if you prepare the live, code-based demo for us.

[semicolon]

Okay, I’m in Codepen (I hope). But first . . .

This is what it’s supposed to look like.. There must be a trick to displaying the image here but alas I give up. Please click the blue (above) text for my objective.

I give up.

Here is the codepen address. The link will not display:
codepen.io/semicodin/pen/dgWvdQ

[Shikkediel]

You can display an image like you would write HTML…

<img src="https://i.postimg.cc/RZSbhRWJ/COLSPANS-rev-9.png" alt="">

[Beverleyh]

I’d try a gradient with 2 colour stops https://stackoverflow.com/questions/39739270/how-to-color-a-div-half-blue-half-yellow

[Tyler McNew]

https://codepen.io/noobskie/pen/ZqKmqY

changed to use a helper class for the background

.gradient-yellow-blue

[semicolon]

Beverleyh and Tyler wow! I’ve pruned the introductory codepen (minus it’s screenshot & intro) and you can see the new one here..

Beverleyh, that stackexchange thread is one of those types you not only print out, you save it. Twice. Thank you so much for sharing it.

Tyler, you’re solution is excellent, however I was hoping the table’s padding would carry over to the 3 sides of the tab that need it: Left, Right + Top. I’ve tried a couple of experiments (adding padding, margins etc.) to your .gradient-yellow-blue style but the table’s 5px padding doesn’t display.

You’ve got a number of things working here that I need to study & learn. May I ask a couple of Codepen questions:

What is a “fork”? -and- are you able to edit the code in my “pens” dynamically or do you always just create a new one? I can see how efficient Codepen is when you only need to tweak one line, or close one tag somewhere — either in the HTML or the CSS — without pouring out the code for the whole bloody file! May I hope to see an example of this Tyler in the revision that will add padding? ;)

[semicolon]

Shikkediel, yes that was what I tried
but it doesn’t work.

[Beverleyh]

Gradients don’t really need vendor prefixes now (unless you’re supporting really old browsers) so you can reduce the CSS a lot https://codepen.io/anon/pen/NOgJoO

And for the white edges, try an inset box-shadow. You can use multiple, comma separated box-shadows on the same element to build up the thickness of each side individually. In the demo I just used one for simplicity. More info here https://css-tricks.com/almanac/properties/b/box-shadow/

About CodePen; unfortunately I don’t have a personal account to know all the nitty-gritty details – maybe one of the others could answer in more detail? I just use the fork (make a copy) option to duplicate someone else’s pen in order to edit the code in a new anonymous pen. The free account or paid account may very well have sharing/dual edit capabilities. A free account allows you to organise, save and re-edit old pens, instead of the there-and-then anonymous pens that I tend to use.

[semicolon]

Had some weirdness logging in here, fixed now.

So Beverleyh, when I thought css-tricks had blocked my account (?!) I returned to an earlier thread I had posted over at stack and was surprised to have this ‘Answer’. It looked so hopeful, if for no other reason than the mercifully-lite coding required. He has an extremely advanced skill set so that’s what is so frustrating because it either never worked -or- when I carefully modified it to suit my specific layout I obviously broke something. You can see REV. 7 HERE.

What do you think?

[semicolon]

I don’t believe it. This, using nowrap. I’m going to see how much code I can trim . . .

[Beverleyh]

The line-break in your markup – the inline-blocks each sitting on their own line – creates extra white space which means that they cant be 50% wide and sit side-by-side in the same cell; Their total width plus the space will exceed 100%, causing them to break into a line.

You need to do this:

<div></div><div></div>

[Beverleyh]

Code blocks dont appear to be working in the forum so just look at the way that SO answer has both divs butted up against each other – so the closing angle bracket of the first one touches the opening angle bracket of the second, on the same line, with no space or new-line separating them.

[Paulie_D]

https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements

[semicolon]

Great link Paulie_D. Content saved for learning.

————————————

Beverleyh . . . Once again, concise, powerful advice. Thank you so much.

————————————

BTW, I made a mistake in my concept, and it is that my two-color cell in COLUMN 9 is the only padding exception in the table: 5/9 needs bottom: 0px. I realized that if the cell directly beneath it in row 6 had padding of top: 0px this would be ugly indeed, with text abutting the colored tab.

Okay let me look at everything and expect a new pen. Thanks everyone.

[Author]

Posts