Marc Roussel Marc Roussel - 4 months ago 12
HTML Question

Table inside div goes out of div in Chrome only. It works fine in all other browsers

I have a div which have a fixed width then a table inside which is width:auto and the table has 2 column. I tried many things like 100%. The only working solution is to have the input search at 150px I don't understand.

The table goes out of the div as shown in this jsfiddle :

<div style="border:1px solid black;border-radius:15px;margin-left:10px;float:left;width:180px;height:26px">
<table border="0" style="width:auto;height:100%;border-collapse:collapse;table-layout:fixed">
<tbody><tr>
<td>
<img id="SearchIcon" src="/Content/icons-png/search-white.png" width="16" height="16" style="margin-left:5px;margin-top:4px;margin-right:5px">
</td>
<td>
<input id="SearchBox" type="search" style="border:1px solid red;border-radius:0 12px 12px 0;height:100%;width:auto" placeholder="Search">
</td>
</tr>
</tbody></table>
</div>


Example

Answer

Change your width in your input

width:auto;

to

width:100%;

That will do it.