html - HTMLテーブルが期待どおりにフォーマットされていませんか?

Question

作業中のテーブルにフォーマットの問題があります。以下の表の行のスクリーンショット スナップを参照してください。

以下は私のテーブルのhtmlです-したがって、問題は、F12を実行して、指定した5pxだけでなく、多くのスペースを占有していることを示す*列を強調表示すると、検証メッセージが押し上げられ、ロックされないことです彼らが埋めることができるスペースがあるときはいいです。私が見逃しているばかげたことはありますか？

<table class="ui-widget-content" style="width: 565px; height: 200px; margin-top: 10px;">
    <tr>
        <td style="width: 10px;"></td>
        <td class="label">Forename :
        </td>
        <td class="value">
            @Html.TextBoxFor(model => model.Forename, new { id = "foreName", style = "width:150px" })
        </td>
        <td style="width:5px;">*</td>
        <td class="field-validation-error" style="width: 180px;">
            @Html.ValidationMessageFor(model => model.Forename)
        </td>
    </tr>
    <tr>
        <td style="width: 10px;"></td>
        <td id="FloorText" class="label">Surname :
        </td>
        <td class="value">
            @Html.TextBoxFor(model => model.Surname, new { style = "width:150px" })
        </td>
         <td style="width:5px;">*</td>
        <td class="field-validation-error" style="width: 180px;">
            @Html.ValidationMessageFor(model => model.Surname)
        </td>
    </tr>
    <tr>
        <td style="width: 10px;"></td>
        <td class="label">Email Address :
        </td>
        <td class="value">
            @Html.TextBoxFor(model => model.Email, new { style = "width:150px" })
        </td>
         <td style="width:5px;">*</td>
        <td class="field-validation-error" style="width: 180px;">
            @Html.ValidationMessageFor(model => model.Email)
        </td>
    </tr>
</table>

編集 - F12 でコードのスクリーンショットを表示するように編集された質問 - 自動生成されたスパンのようです - これに幅を追加するにはどうすればよいですか?