Input width within table same for all columns irrespective of column contents - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Column

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Column

Description

Input width within table same for all columns irrespective of column contents

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
table {<!--from  w  ww. j  a  v  a  2 s.  co m-->
   width:100%;
}

input {
   width:100%;
}

td:nth-child(3),
tr:nth-child(3) {
   width:100%;
}

td,
th {
   text-align:left;
   padding:11px;
}
</style> 
 </head> 
 <body> 
  <table> 
   <thead> 
    <tr> 
     <th>L</th> 
     <th>Lo</th> 
     <th>Lore</th> 
     <th>Lorem</th> 
     <th>Lore</th> 
    </tr> 
    <tr> 
     <th></th> 
     <th> <input type="text"> </th> 
     <th> <input type="text"> </th> 
     <th> <input type="text"> </th> 
     <th> <input type="text"> </th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>L</td> 
     <td>Lor</td> 
     <td>Lore</td> 
     <td>Lorem </td> 
     <td>Lore</td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials