Styling table (border radius) and td

[Willem-Siebe]

Hi,

When you go to:

http://caesarsbeauty.nl/contact/

at the end of the page you can ask for a route. If you fill in your placename this wil output the route in a table. For some reason I can’t get the part where the red and green placemarks are to have it a border radius, I tried:

                            table.adp-placemark {
                        border-collapse: seperate;
                        .border-radius(@baseBorderRadius);
                        }

but that did not work.

Also, the images for placemark are placed in a ‘td’, I tried everything so that those images and text are not mixed in each other, but nothing helped either. Can somebody have a look for me?

Kind regards,

Willem

[georgearnall]

Here is a CodePen showing how give tables rounded corners. I don’t actually think the code above is on the website when I checked through Chrome Dev Tools Inspector.

Perhaps you could put the image and the text in the same cell. This way they sit next to each other.

Thanks

[Willem-Siebe]

Hi George,

Thanks for you CodePen. I played with it and also read https://css-tricks.com/complete-guide-table-element/.

I practised it first on other website, and it works, but not in Firefox…

You can view it here: http://klepbankonline.nl/winkelwagen/, but put something in the shoppingcart first to see the table. I give a border radius to top and bottom corner td elements, but in firefox it’s not working.

Kind regards,

Willem

[georgearnall]

Glad I could help!

The border-radius seems to be working for me? Which version of FF are you using ? Or could you get a picture?

Thanks

[Willem-Siebe]

Hi,

I use FF 26.0.

Here the picture that FireFox does not show rounded corners on the TD elements.

http://klepbankonline.nl/no%20corner%20firefox.png

Kind regards,

Willem

[georgearnall]

Hi, Willem

The reason it is doing this (and I haven’t got time to look why) is because the thead has a background colour and so you can’t see the border-radius on the tr. To fix this problem, use thead { background: transparent; } and td, th { background: #F8F8F8; }

Hope this works out for you.

George

[Willem-Siebe]

You rock. I replaced my background from thead and tr to th and td. Thanks!

[Author]

Posts