CSS - Button doesn't fill table cell

Question

I'm using a <table> to layout a standard HTML contact form. Let's not discuss the merits of using a table given that HTML should not be about presentation but structure (which is why I believe it's justified anyway).

Nonetheless, here is the markup and CSS I'm using (as-generated by ASP.NET MVC):

            <table class="fieldTable">
                <tbody>
                    <tr>
                        <th><label for="Name">Your name</label></th>
                        <td><input id="Name" name="Name" type="text" value="" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>

                    <tr>
                        <th><label for="EmailAddress">Your e-mail address</label></th>
                        <td><input id="EmailAddress" name="EmailAddress" type="text" value="" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>

                    <tr>
                        <th><label for="MessageBody">Message</label></th>
                        <td><textarea cols="30" id="MessageBody" name="MessageBody" rows="6"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>

                    <tr>
                        <td></td>
                        <td><button type="submit"><span>Send Message</span></button></td>
                    </tr>
                </tbody>
            </table>

And my CSS:

.fieldTable th {
    text-align: right;
    font-weight: normal;
    vertical-align: top;
    padding: 0.25em;
    padding-right: 0.5em; }

.fieldTable input,
.fieldTable textarea,
.fieldTable button {
    width: 100%; }

input, textarea, button {
    border: 1px solid #999;
    padding: 0.5em;

    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 7px 3px #c4c4c4;
    box-shadow: 0px 0px 7px 3px #c4c4c4; }

button        { background: #DDD; position: relative; }
button:hover  { background: #FFF; }
button:active span { position: relative; top: 2px; left: 2px; }

tr { outline: 1px solid blue; }
td { outline: 1px solid red; }

However it seems to render like this:

Why isn't the <button> element filling the cell horizontally?

Answer 1

I think you might be looking for box-sizing, it is what determines if the margin/padding get added or excluded when calculating the width/height.

box-sizing: border-box;

That should allow you to set a percentage width/height and it will fill without spilling over.

EDIT: It is on button by default (if you inspect the element you will see the browser already adds it). It can be added to your textareas and input fields to get them to match up with your buttons.

If you look at your screen shots. The input fields are going outside of the TDs and the button seems to be the only one really behaving.

Answer 2

David I took a look at your html and created a jsFiddle based on it. I then modified your css to use the box-sizing property you're looking for. Although its applied to other objects on the DOM you might want to extract it into its own class for only the textareas.