CSS to make text input take up the rest of table cell's width - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

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

Description

CSS to make text input take up the rest of table cell's width

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 {<!-- w ww  .  j av  a  2  s  .  c  om-->
   width:100%;
   border:3px solid Chartreuse;
}

select {
   width:100px;
}

input {
   width:calc(100% - 111px);
}
</style> 
 </head> 
 <body> 
  <table> 
   <tbody> 
    <tr> 
     <td> 
      <div> 
       <select> <option>Lorem </option> <option>Lorem i</option> </select> 
       <input type="text"> 
      </div> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials