CSS expand dropdown to fill the remaining space in fixed width table cell - 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 expand dropdown to fill the remaining space in fixed width table cell

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">
td {<!--from  w  w  w  .j  a  va2 s  .c  om-->
   border:2px solid Chartreuse;
   padding:2px;
   min-width:301px;
}

table {
   margin:51px;
   background-color:yellow;
   border-collapse:collapse;
}

.inner-table {
   margin:0;
}

.my {
   min-width:16px;
}

button {
   padding:2px;
   float:right;
}

select {
   width:100%;
}
</style> 
 </head> 
 <body> 
  <table> 
   <tbody> 
    <tr> 
    </tr> 
    <tr> 
     <td> 
      <table class="inner-table"> 
       <tbody> 
        <tr> 
         <td> <select> <option value="">Lorem ips</option> </select> </td> 
         <td class="my"> <button>L</button> </td> 
        </tr> 
       </tbody> 
      </table> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials