HTML Table with No Space

Question

I have the following CSS code:

    tr.uprightTr
    {
        padding: 0px;
        margin: 0px;
        height: 10px;
        border: none;
        border-spacing: 0px;
    }
    td.uprightTd
    {
        padding: 0px;
        margin: 0px;
        height: 10px;
        border: none;
        border-spacing: 0px;
    }
    table.uprightTbl
    {
        padding: 0px;
        margin: 0px;
        border: none;
        border-collapse: collapse;
        border-spacing: 0px;
    }

And the following HTML:

<table class="uprightTbl" cellpadding="0" cellspacing="0">
    <tr class="uprightTr">
         <td class="uprightTd"><input type="checkbox" /></td>
...

No matter what I tried, it keeps some space between elements. Any ideas on what I can try or might be doing wrong?

P.S: I also checked out the element on Chrome, element reaches the related css lines successfully.

Answer 1

Did you try to add a CSS rule for all elements such as:

.uprightTbl * {
    border: none;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
}

It may solve your problem.

Answer 2

Apply below styles:

border-spacing:0;
border-collapse:collapse;

This query is already present: Set cellpadding and cellspacing in CSS?