CODEWITHSUNDEEP
htmlcss
Neel
Neel

Reputation: 625

Remove spaces between table cells

I have following markup 

      <div class="dc2-search-form">
                <table width="100%">
                    <tbody>
                        <tr>
                            <td>
                                <div class="search-form-label">
                                    <span id="StreetAddress_Label">Address</span>
                                </div><br>
                                <input style="height: 10px; width:80px" tabindex="0"
                                type="text" value="">
                            </td>
                            <td>
                                <div class="search-form-label">
                                    <span id="Sales_Cycle_Label">Sales
                                    Cycle</span>
                                </div><br>
                                <input style="height: 10px; width: 80px;" tabindex="0" type="text" value="">
                            </td>
                        </tr>
                    </tbody>
                </table>

And following CSS

.dc2-search-form {
 overflow-x: scroll;
 }
.dc2-search-form  table {border-collapse:collapse;border-spacing:0;border:0}
.dc2-search-form .search-form-label{font-size:13px;background-color:#BFBFBF;padding:10px 0 10px 1px; border-top:1px solid black;border-bottom:1px solid black;}
.dc2-search-form table select,input{height:10px;font-size:10px;padding:2px;}

Here is the jsfiddle for reference

It gives me the desired output except for a tiny bit space between table cells. I need to make the span div appear as seamless one row with border on top and bottom but I am to able to accomplish that due the space.

How to remove the space between them.

Upvotes: 0

Views: 160

Answers (3)

Klemen Tusar
Klemen Tusar

Reputation: 9689

Try setting the cellpadding and cellspacing to 0, like this:

<table cellpadding='0' cellspacing='0'>
    ...stuff...
</table>

Upvotes: 0

George
George

Reputation: 36786

Apply no padding to your table cells:

.dc2-search-form  table td{padding:0}

JSFiddle

Upvotes: 1

NoobEditor
NoobEditor

Reputation: 15871

add cellspacing=0 cellpadding=0 to your table

update fiddle

<table width="100%" cellspacing=0 cellpadding=0>

Upvotes: 0

Related Questions