Rounded table corners Options

[CharlesEF]

I want a table with rounded corners. Sounds simple. But border-radius seems to have no effect. Attached is a simple countdown timer I got from w3Schools. I'm working on a different display for the results among other changes. I was able to get rounded corners a different way. But a side effect is gaps between the th cells. If I use 'border-collapse: collapse' then I get rid of the gaps but I end up with both square and round corners.

Is there a secret I don't know about?
 countdown_timer.htm ( 3.51k ) Number of downloads: 20

[pandy]

I think this may be what you are looking for.
https://unused-css.com/blog/css-rounded-table-corners/

[CharlesEF]

Thanks, border-spacing was what I needed.

[pandy]

Suspected that. I struggled with the same thing. I think that article explains it well. It's obvious - once one knows it.

[CharlesEF]

For anyone interested in my final solution. I only took a couple of CSS entries from the example article to make my CSS solution work. This example should work with any table of any size.
 countdown_timer.htm ( 3.6k ) Number of downloads: 12


This post has been edited by CharlesEF: Jan 3 2025, 11:33 AM

[CharlesEF]

Ok, turns out to be too early in the morning for me. 1 correction needs to be made to my final solution post. Move these entries:

CODE

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;

from '.countdown table' to '.countdown'. Sorry, now back to bed.

[coothead]

Hi there CharlesEF,

note that these...

CODE

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -khtml-border-radius: 5px;

...are no longer required.

Source
https://caniuse.com/?search=border-radius

coothead

[CharlesEF]

Thanks for the info. Guess it's time to update my CSS template.

[CharlesEF]

Ok, last upload. I remembered I used an external function file, which I didn't upload. This upload will run as is.
 countdown_timer.htm ( 3.73k ) Number of downloads: 9

[coothead]

Hi there CharlesEE,

I have separated your CSS and Javascript from the hTML to make things tidier.

Check out the attachment to see the result.

 CharlesEF.zip ( 1.98k ) Number of downloads: 8


P.S. What is going to occur in five years time?

coothead

This post has been edited by coothead: Jan 5 2025, 07:24 PM

[CharlesEF]

Hi there CharlesEE,

I have separated your CSS and Javascript from the hTML to make things tidier.

Check out the attachment to see the result.

 CharlesEF.zip ( 1.98k ) Number of downloads: 8

Thanks,I'll check it out and report back.

P.S. What is going to occur in five years time?

coothead

Who knows. Maybe they'll get 'border-collapse: collapse;' to work with 'border-radius'? Until then this solution should be fine, even if they get it to work.

[coothead]

Hi there CharlesEE,

the only reason for my asking this...

What is going to occur in five years time?

...was that your countdown timer was set to expire in five years time.

I had no interest in the future use of the CSS that the code might have contained.

At eighty years of age, I will most likely have shuffled off this mortal coil by then.

coothead

[CharlesEF]

Oh, that 5 years. That was the date on the w3schools example, that I worked with. No other reason.