CODEWITHSUNDEEP
htmlcss
trap
trap

Reputation: 2640

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.

Upvotes: 0

Views: 1393

Answers (2)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

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

Upvotes: 4

Head In Cloud
Head In Cloud

Reputation: 2051

Try this

 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%;}


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%;}
<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>

Upvotes: 0

Related Questions