I need a table to scroll with the x-axis if the width of the table is greater than the width of the container. If I do this, it will work:
overflow-x: auto;
overflow-y: hidden;
But I need the overflow-y to be visible, because at the end of the table there is a select, and when I open the select it appears cut off.
If I put:
overflow-y: visible;
It puts a scroll upright as well.
If someone has any light, thank you in advance.
If you understand what I mean, you want select not to accompany the side scroll.
In this case, you can do this by removing position: absolute; from select style.
$('#select1').chosen();.wrapper {
/* colocar tudo dentro de um wrapper*/
position: relative; /* com posicionamento relativo */
}
#container1{
position: static; /* Adicionar position static no container com overflow */
border:1px solid black;
height:100px;
overflow-x:auto;
overflow-y:visible;
}
table {
width: 2000px; /* adicionar uma largura para mostrar o scroll no eixo x */
}
#select1_chosen {
/* o chosen cria um #id-do-elemento_chosen */
}<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<div class="wrapper">
<div id="container1">
<table>
<thead>
<tr>
<th>Teste</th>
<th>Teste2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Info</td>
<td>info</td>
<td>Info</td>
<td>info</td>
<td>Info</td>
<td>info</td>
</tr>
<tr>
<td>Info</td>
<td>info</td>
</tr>
</tbody>
</table>
<select name="" id="select1">
<option value="option 1">Op 1</option>
<option value="option 2">Op 2</option>
</select>
</div>
</div>Jsfiddle: Example here