CSS для ввода текста занимает остальную ширину ячейки таблицы

Question

В ячейке таблицы у меня есть 1 элемент select и 1 элемент ввода текста. Элемент select может иметь фиксированную ширину, равную 100px.

Как я могу сделать ввод текста, чтобы взять остальную ширину ячейки?

<td> 
    <div> 
     <select> 
     <option>string</option> 
     <option>integer</option> 
     </select> 
     <input type="text"> 
    </div> 
</td> 

Answer 1

Попробуйте это:

table { width: 100%; } 
select { width: 100px; } 
input { width: calc(100% - 110px); } 

DEMO: http://jsfiddle.net/1xwfwrz9/1/

Answer 2

можно использовать свойства поплавок:

table { 
 
    width:80%;/* for demo */ 
 
} 
 
select { 
 
    width:100px; 
 
    float:left;/* start playing with float */ 
 
} 
 
label {/* or whatever you choose to wrap input */ 
 
    display:block; 
 
    overflow:hidden;/* use a container turned into block to stand aside the float*/ 
 
} 
 
input { 
 
    width:100%;/* spread it all the way in avalaible space */ 
 
}

<table><tr> 
 
<td> 
 
    <div> 
 
     <select> 
 
     <option>string</option> 
 
     <option>integer</option> 
 
     </select> 
 
     <label> 
 
     <input type="text"/> 
 
    </label> 
 
    </div> 
 
</td></tr> 
 
</table>