set width: 100% в css только при превышении ячейки таблицы

У меня есть эта страница html, содержащая таблицу с тремя столбцами и строкой.set width: 100% в css только при превышении ячейки таблицы

<html><head>  
<title>Test input text in table</title> 
<style type="text/css">  
table {width:500px; border-top: 1px solid #ff0000; border-left: 1px solid #ff0000;} 
table td {border-right: 1px solid #00ff00; border-bottom: 1px solid #00ff00;} 
#selectbox {   
width : 100%;  
} 
</style>  
</head><body> 

<table cellpadding="0" cellspacing="0"> 
<tr> 
<td><p>column one</p></td> 
<td><p>column two</p></td> 
<td><p>column three</p></td> 
</tr> 
<tr> 
<td><input type="text" value="test"></td> 
<td><input type="text" value="test"></td> 
<td style="width:300px">Dymamic Text : <select id="selectbox"><option value="1">Small Content1</option> 
<option value="2">Small Content2</option> 
</select> 
</td> 
</tr> 
</table> 

</body></html>

У меня есть выпадающий список в 3-й ячейке. Ширина раскрывающегося списка по умолчанию равна 100%. Я дал ширину: 100% только потому, что родительская ячейка не должна расширяться с выпадающим содержимым.

Проблема, с которой я столкнулась, показывает выпадающее меню на 100%, даже если выпадающее меню имеет меньше контента или контента. Как я могу убедиться, что выпадающее меню получает 100% -ную ширину только тогда, когда у него большой контент (или содержимое превышает ячейку таблицы)?

источник

2016-07-13 Shrinath Shetty

Вы можете попробовать 'ширина: авто' –

с "ширина: авто;" контейнерная ячейка (td) расширяется, когда у вас есть большие тексты в выпадающем меню –

попробовать

#selectbox {   
    width : 50%;//or try 'auto' 
    max-width : 100%; 
}

источник

2016-07-13 08:15:50

set width: 100% в css только при превышении ячейки таблицы

ответ

Смежные вопросы