Web Development Guides

Rendering problem in my table – HTML & CSS – SitePoint Forums

Rendering problem in my table – HTML & CSS – SitePoint Forums

Good morning,

I don’t understand why I have a problem with the rendering Item Name, Item Price, Action is shifted and in a white frame when it should be a simple drawn line.
here is the link to my code :

Le rendu que j’obtient :

Can you help me ?

Your fiddle shows the page with a white background not black? where is the black background coming from in your picture. If I add a black background to the body I can see that the table cells are white but that’s because they have been styled to be white. You’d have to change the background of the cells to transparent if you don’t want a background.

Have you toggled on dark-mode. Is that what you are testing?

If I toggle dark-mode on in devtools it looks ok to me and no white boxes around the titles.

Its not shifted in your picture as the top of both columns start at the same point. If I put a border around the columns I can see that they are bot aligned.

Obviously there is more padding on the cells than the labels but that’s not an error as such.

As I mentioned the background is white on your fiddle (and so was the text until I removed the universal selector setting everything top white).

What are you seeing in your fiddle?

Thank you for your prompt response.

However in my explorer I see this:

Here is my css:

body {
    background-color: #1d2630;

* {
    color: #fff;

#cart-table th,
#cart-table td {
    text-align: center;

#total-cost {
    font-size: 24px;
    font-weight: bold;

@media print {
    .no-print {
        display: none;

Mon html

    B.S.A Onligne

Item Name Item Price Action

Total Cost: $0

Enable Notifications OK No thanks