Ändern Sie die Eingabegröße in Spalte

Question

Ich habe eine Tabelle mit Eingabefeldern in der 1. Spalte. Jetzt möchte ich nur die Größe des E-Mail-Eingabefeldes ändern. Aber wenn ich es ändere, nehmen alle Eingabefelder automatisch auch die Größe an. Was muss ich hier ändern?

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

wenn ich style="width:300px;" in dem E-Mail-Eingabefeld setzen, alle dann andere Felder in dieser Spalte wird automatisch die Breite = 300

Vielen Dank im Voraus.

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>

hinzufügen 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

Versuchen Sie, diese

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>