CSS - 按鈕不填充表單元格

我正在使用<table>來佈置標準HTML聯繫人表單。我們不要討論使用表格的優點，因爲HTML不應該用於表示而是結構（這就是爲什麼我認爲它是合理的）。CSS - 按鈕不填充表單元格

儘管如此，這裏是標記和CSS我使用（通過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>

我的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; }

但是它似乎呈現像這樣：

Normal rendering Rendering with tr/td outlines