CSS gradient - across multiple table boxes Options

[Brian Chandler]

I am making a shipping selection page for my shop, and partly because of Covid the range of choice (or not) is bewilderingly different for each country. So I want to be user-friendly, and I am listing the available methods for the destination, in descending priority. So the top is SPEED and the bottom is ECONOMY. The output is all in a table (because it is actually tabular), so the options are arranged down the leftmost column. I want to use a css gradient with red at the top, and green at the bottom, fading to white in the middle.

Question: is there any neat way I can just apply a single gradient background to the whole left column?

This would save me having to write n different cases, depending on the number of options, to arrange bits of the gradient in each of the column of TDs.

Sorry, haven't written anything yet, but I hope my description is clear. Thanks for help...

[Christian J]

Like this?

CODE

table {
background: linear-gradient(red, white, lime);
}

td {
background: #fff;
}

td:first-child {
background: transparent;
}

Set border-spacing to zero if you don't want the gradient background to be visible between the right column cells.

[Brian Chandler]

Like this?

CODE

table {
background: linear-gradient(red, white, lime);
}

td {
background: #fff;
}

td:first-child {
background: transparent;
}

Set border-spacing to zero if you don't want the gradient background to be visible between the right column cells.

Thanks Christian - I never thought of putting it on the whole table.

Hmmm, but... trouble is, this is classic css "pseudo-programming". The table might have a header (not actually sure yet), and the column might turn out not to be the leftmost (and let me guess, there is no css selector "second-child"), so the problem is lack of robustness. As soon as I want to change anything slightly I have to dream up a new "trick". So I think I will just do it in separate pieces - there are only about five cases - and it will be transparent and robust.

Incidentally I am somewhat astonished you have not looked at the flex thing. Although stuck with the fundamental design errors of css, it basically provides what you need most of the time in terms of layout spacing, and flexibility.

[Christian J]

The table might have a header (not actually sure yet)

In that case I'd use the gradient on a TBODY element instead of TABLE. I think you must separate the TBODY from other TBODYs with e.g. a CLASS, since TBODY elements are implied by the browser wether you specify them explicitly in the HTML or not (so it may not work to use a single explicit TBODY and target it with a generic tbody CSS selector).

and the column might turn out not to be the leftmost (and let me guess, there is no css selector "second-child"), so the problem is lack of robustness.

There's nth-child. So if you want say a gradient starting with the second column of a specific TBODY you might use:

CODE

tbody.foo {
background: linear-gradient(red, white, lime);
}

td {
background: #fff;
}

td:nth-child(2) {
background: transparent;
}

<table>
<tr>
<td>solid</td>
<td>solid</td>
<td>solid</td>
</tr>

<tbody class="foo">
<tr>
<td>solid</td>
<td>gradient</td>
<td>solid</td>
</tr>
<tr>
<td>solid</td>
<td>gradient</td>
<td>solid</td>
</tr>
</tbody>

<tr>
<td>solid</td>
<td>solid</td>
<td>solid</td>
</tr>
</table>

CSS3 has all kinds of new selectors that make my head spin: https://www.w3.org/TR/selectors/

Or maybe the COL and COLGROUP elements could be used instead of the nth-child selector, depending on your preferred authoring approach, but I don't know much about them.

Incidentally I am somewhat astonished you have not looked at the flex thing. Although stuck with the fundamental design errors of css, it basically provides what you need most of the time in terms of layout spacing, and flexibility.

Well, I haven't been up to date the last few years. When I first heard of flexboxes I didn't know about browser support, then they dropped off the radar. Also the increasingly obscure W3C specs dampen my curiosity --nowadays I hardly know where the specs are being hosted anymore, what the versions are called, or which version is the one to use (for practical purposes).

[Brian Chandler]

Here's what I have (this is a frozen sample, not the live thing; work in progress).

https://imaginatorium.com/test_minht.html

This is an artificial example, since it is unlikely for there to be more than 2 or 3 choices. And I'm quite pleased with it, because it really is better with a different pattern for long or short versions.

A couple of other issues emerged. I wanted to make each row of the table at least 4em high, and having learned of "min-height" (I don't think this existed when I did the last version), I tried TR { min-height: 4em}. This had no effect; the W3Schools site explanation of "min-height" is to write about four times, in slightly broken English, what "minimum height" means. It says this applies to an "element", but doesn't mention any elements it doesn't apply to, but stackexchange answers suggest that it is simply undefined for TD or TR. It finally dawned on me the other day that this is a "mode" problem - table stuff uses a completely different box model (ah, but of course it's the same "CSS-box-model"), in which any height or width is always a minimum, because the TD expands to be outside its contents, in a way that DIVs do not. Is that right? I can simply set TR { height: 4em } to assign a minimum height? (In the interim I tried DIV soup: put a div with a min-height of 4em inside the TD, then use the flexbox thing, which roughly gives you back the control you get naturally with a TD. Grr)

And a bizarre problema piccolissimo. With this sample, make the window wide enough that the "Shipping fee" heading is on one line. Then make the window narrower, so it is just on two lines; at least in FF, there is a superwide space to the right of "Shipping", instead of shrinking the column around the caption. What is this?? Perhaps it's a "quirk"; it's not really important.

[Christian J]

any height or width is always a minimum, because the TD expands to be outside its contents, in a way that DIVs do not. Is that right?

That's my understanding.

I can simply set TR { height: 4em } to assign a minimum height?

It appears so. But I can't say what is the theoretical difference between that and min-height in this case.

And a bizarre problema piccolissimo. With this sample, make the window wide enough that the "Shipping fee" heading is on one line. Then make the window narrower, so it is just on two lines; at least in FF, there is a superwide space to the right of "Shipping", instead of shrinking the column around the caption. What is this?? Perhaps it's a "quirk"; it's not really important.

I didn't see that.

[Brian Chandler]

 CSS gradient - across multiple table boxes

if you leave only background-attachment: fixed; it works fine

.gradient {
background-image: linear-gradient(210deg, #FFF133 38%, #16D611 46%, #00A3EF 59%);
background-attachment: fixed;
}
and should set table width=100%

I don't quite understand this, but it looks like applying to the whole table, while I only want one column. I did it by calculating separate gradients for the TDs.

And why is there an advert for some USPS service? Are you being paid by them?