在列中更改输入大小

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>

添加colspan

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

Answer 2

试试这个

 table{width:300px; table-layout:fixed;}
table tr td,table tr th{width:20%;word-wrap: break-word;}
table tr td.thsize > input{width:100%;}

＆＃13;

＆＃13;

table{width:300px; table-layout:fixed;}
table tr td,table tr th{width:20%;word-wrap: break-word;}
table tr td.thsize > input{width:100%;}

＆＃13;

<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  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>

＆＃13;

＆＃13;

＆＃13;