Why x-scroll doesn't working? - html

Question

I have a trouble with x-scroll table, when I try to resize window to small size. I have the same table (with same css) which doesn't contain row with images and it works great.
HTML:
<div class="price_wrapper">
<table class="price">
<thead>
<tr class="head">
<th>Название</th>
<th>Вольерная 1</th>
<th>Вольерная 2</th>
<th>Вольерная 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Схема</td>
<td><img src="http://king-bitovki.ru/static/pub/img/products/budki/volyer1.jpg" alt=""></td>
<td><img src="http://king-bitovki.ru/static/pub/img/products/budki/volyer2.jpg" alt=""></td>
<td><img src="http://king-bitovki.ru/static/pub/img/products/budki/volyer3.jpg" alt=""></td>
</tr>
<tr>
<td>Ширина</td>
<td>90</td>
<td>120</td>
<td>150</td>
</tr>
<tr>
<td>Высота</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td>Глубина</td>
<td>60</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>Лаз</td>
<td>30x35</td>
<td>39x42</td>
<td>42x53</td>
</tr>
<tr>
<td>Стоимость, руб.</td>
<td>7 000</td>
<td>9 000</td>
<td>11 000</td>
</tr>
</tbody>
</table>
</div>
CSS:
.price_wrapper {
overflow-x: scroll;
overflow-y: auto;
min-width: 400px;
width: 100%;
}
table.price {
border-collapse: collapse;
background-color: #FFF;
}
table.price th,
table.price td {
border: solid 1px #999;
padding: 5px;
}
table.price img {
max-width: 180px;
width: 100%;
height: auto;
}
JSFiddle: https://jsfiddle.net/vasromand/gue888vp/
Why is it?

Answer 1

You must use width for the scroll to
work.price_wrapper {
overflow-x: autol;
overflow-y: auto;
max-width: 400px;
width: 100%;
}
And dont use scroll because it will not be working in ie so instead you can use auto for it and set max-width or width to enable the auto scroll

Answer 2

Your content is not overflowing, you're using the width 90% of its container.. there never will be an overflow to scroll..
800px Content
table.price {
width: 800px;
margin: 10px 5%;
border-collapse: collapse;
background-color: #FFF;
}
400px container
.price_wrapper {
overflow-x: scroll;
overflow-y: visible;
width: 400px;
}
This will force the content to be wider than the wrapper.. which has the overflow-x
Also as correctly suggested by the other answer, use overflow:auto
Here is an updated version which will FORCE overflow to show you an example..
JSFiddle
As you can see i have forced the child to be wider than its parent.. Therefore offering scroll.