Question

当我尝试将窗口调整为小尺寸时，我遇到了x滚动表的问题。我有相同的表（使用相同的css），它不包含带图像的行，并且效果很好。

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/

为什么？

Answer 1

您必须使用滚动宽度

{{1}}

并且不要使用滚动因为它不会工作，所以相反你可以使用auto来设置它并设置max-width或width来启用自动滚动

Answer 2

您的内容没有溢出，您正在使用其容器的90％宽度..滚动中永远不会有溢出..

800px内容

table.price {
    width: 800px;
    margin: 10px 5%;
    border-collapse: collapse;
    background-color: #FFF;
}

400px容器

.price_wrapper {
    overflow-x: scroll;
    overflow-y: visible;
    width: 400px;
}

这会强制内容比包含overflow-x

的包装器更宽

另外，正如其他答案所正确建议的那样，请使用overflow:auto

这是一个更新版本，FORCE溢出以向您展示示例..

JSFiddle

正如你所看到的，我强迫孩子比父母更宽..因此提供卷轴。

为什么x-scroll不起作用？

2 个答案: