CODEWITHSUNDEEP
csshtml-table
mellis481
mellis481

Reputation: 4158

Width issue with input in table's thead th

I have a table which has a peculiar style issue when I insert an input element in the header. It does not center the input exactly; instead it is off by 2 pixels on the right side. I have some Twitter Bootstrap styles applied to the table, but I can't find one that is causing the issue so I don't think that has anything to do with it. Here is the markup:

<thead>
    <tr>
        <th scope="col" style="width: 5%;">
            <a href="#">ID</a>
            <input type="text" value="" class="grid-filter" id="id-filter">
        </th>
    ...

Here is a picture of the issue (zoomed in considerably):

enter image description here

Here are the styles applied:

th { 
    width: 15%; 

    a { display: block; }

    input {
        height: 15px;
        line-height: 15px;
        margin: 0;
        padding: 5px 0;
        width: 100%;
    }
}

In the image above, I'm using Firebug and have focused on the "ID" anchor. As you can see, the anchor is correctly centered in the th, but the input box has an extra 2 pixels on the right for some reason. Why is this? The weird thing is that this does NOT affect select elements, only input elements.

Update: When I set the border and outline, Bootstrap's focus glow also has a border. Not sure which style to override...

enter image description here

Upvotes: 0

Views: 2171

Answers (1)

Tom Fenech
Tom Fenech

Reputation: 74625

edit: looks like the problem is your width attribute. Check this JSFiddle

HTML:

<table>
    <thead>
        <tr>
            <th scope="col" style="width: 5%;">
                <a href="#">ID</a>
                <input type="text" value="" class="grid-filter" id="id-filter"/>
            </th>
        </tr>
    </thead>
</table>

CSS:

a, input {    
    padding: 0;
    margin 0;
}

a { 
    display: block;
    background: red;     
}

input {
    height: 15px;
    line-height: 15px;
    /* width: 100%; */
}

table { width: 3em }

The width attribute on the input defaults to auto, which does what you want in this case.

Upvotes: 1

Related Questions