set width: 100% in css nur wenn es die Tabelle Zelle

Ich habe diese HTML-Seite, die eine Tabelle mit 3 Spalten und einer Zeile enthält.set width: 100% in css nur wenn es die Tabelle Zelle

<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>

Ich habe ein Dropdown in der 3. Zelle. Dropdown-Breite ist standardmäßig 100%. Ich gab Breite: 100%, nur weil Elternzelle nicht mit Dropdown-Inhalt erweitern sollte.

Das Problem, mit dem ich konfrontiert bin, ist, dass das Dropdown-Menü in 100% angezeigt wird, auch wenn das Dropdown-Menü weniger Inhalt oder keinen Inhalt hat. Wie stelle ich sicher, dass das Dropdown 100% Breite erhält, wenn es großen Inhalt hat (oder der Inhalt die Tabellenzelle überschreitet)?

Quelle

2016-07-13 Shrinath Shetty

Sie können versuchen, 'width: auto' –

mit "width: auto;" container cell (td) wird erweitert, wenn Sie große Texte im Dropdown-Menü haben –

versuchen

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

Quelle

2016-07-13 08:15:50

set width: 100% in css nur wenn es die Tabelle Zelle

Antwort

Verwandte Themen