html - 更改列中的输入大小

Question

我有一个表，第一列有输入字段。现在我只想更改电子邮件输入字段的大小。但是如果我更改它，所有输入字段也会自动采用该大小。我必须在这里更改什么？

<table >
      <tbody class="thsize">

            <tr class="thsize">
                <th class="thsize">First Name</th>
                <td class="thsize">
                    <input class="form-control" id="firstName" ngControl="firstName" type="text" [(ngModel)]="webUser.firstName"  #firstName="ngForm">
                </td>
                <td class="thsize"></td>        

                <th class="thsize">Last Name</th>
                <td class="thsize">
                    <input class="form-control" id="lastName" ngControl="lastName" type="text" [(ngModel)]="webUser.lastName"  #lastName="ngForm">
                </td>
            </tr>

            <tr class="thsize">
            <th class="thsize">Email</th>
                <td class="thsize">
                    <input style="width:300px;" class="form-control"  id="email" ngControl="email" type="text" [(ngModel)]="webUser.email"  #email="ngForm">
                </td>
            </tr>

            <tr class="thsize">
                <th class="thsize">Country</th>
                <td class="thsize">
                    <input class="form-control" id="country" ngControl="country" type="text" [(ngModel)]="webUser.country"  #country="ngForm">
                </td>
                <td class="thsize"></td>        

                <th class="thsize">Language</th>
                <td class="thsize">
                    {{webUser.language}}
                </td>
            </tr>

        </tbody>
    </table>

如果我将 style="width:300px;" 放在电子邮件输入字段中，则此列中的所有其他字段都会自动获得宽度 = 300。

提前致谢。

Answer 1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<table >
      <tbody class="thsize">

            <tr class="thsize">
                <th class="thsize">First Name</th>
                <td class="thsize">
                    <input class="form-control" id="firstName" ngControl="firstName" type="text" [(ngModel)]="webUser.firstName"  #firstName="ngForm">
                </td>
                <td class="thsize"></td>        

                <th class="thsize">Last Name</th>
                <td class="thsize">
                    <input class="form-control" id="lastName" ngControl="lastName" type="text" [(ngModel)]="webUser.lastName"  #lastName="ngForm">
                </td>
            </tr>

            <tr class="thsize">
            <th class="thsize">Email</th>
                <td class="thsize" colspan="4">
                    <input class="form-control"  id="email" ngControl="email" type="text" [(ngModel)]="webUser.email"  #email="ngForm">
                </td>
            </tr>

            <tr class="thsize">
                <th class="thsize">Country</th>
                <td class="thsize">
                    <input class="form-control" id="country" ngControl="country" type="text" [(ngModel)]="webUser.country"  #country="ngForm">
                </td>
                <td class="thsize"></td>        

                <th class="thsize">Language</th>
                <td class="thsize">
                    {{webUser.language}}
                </td>
            </tr>

        </tbody>
    </table>

添加列跨度

<td class="thsize" colspan="4">
                    <input style="width:300px;" class="form-control"  id="email" ngControl="email" type="text" [(ngModel)]="webUser.email"  #email="ngForm">
                </td>