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.

Rule of thumb when doing css add `* { margin:0; padding:0; font-size:12px}` to top of page to cancel out browser defaults. Should make things a little easier. — gbtimmon, Dec 04 '12 at 18:38
Are you sure this "space" isn't some whitespace in the source or because of your line-height? Typically the desired line-height is bigger than your actual font-size (`font-size: 1em; line-height: 1.4em`) for better readability. — cimmanon, Dec 04 '12 at 19:17

score 12 · Accepted Answer · answered Dec 04 '12 at 18:39

12

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.

answered Dec 04 '12 at 18:39

Ulflander

648
5
15

1

Thanks, but gbtimmon's "rule of thumb" gave me the all-around solution. – İsmet Alkan Dec 04 '12 at 18:49

score 5 · Answer 2 · edited May 23 '17 at 12:02

5

Apply below styles:

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

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

edited May 23 '17 at 12:02

Community

1
1

answered Dec 04 '12 at 18:42

Rups

629
1
8
19

score 1 · Answer 3 · answered Dec 04 '12 at 18:41

1

Add the below css code:

input[type=checkbox] { margin:0 }

By default, the browser set some margin around.

Hope this helps..

answered Dec 04 '12 at 18:41

prajan55

139
1
8

score 0 · Answer 4 · answered Dec 04 '12 at 19:09

0

Check for any display:inline-block... and change to display:block. Inline-block adds 3-4px of space after the element...

If you are using any images make sure they are displayed as block.

answered Dec 04 '12 at 19:09

treckstar

1,956
5
21
26

HTML Table with No Space

4 Answers4

Linked