trap trap - 3 months ago 7
CSS Question

Change Input size in column

I have a table, with input fields in the 1st column. Now I just want to change the size of the email input field. But If I change it, all input field automatically take the size too. What do I have to change here?

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


if I put
style="width:300px;"
in the email Input field, then alle other fields in this columns automatically gets the width = 300.

Thanks in advance.

Answer

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

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