时间戳

首页 > 解决方案 > 即使我为我的 div 父级设置了固定宽度，水平滚动条也不起作用？

html - 即使我为我的 div 父级设置了固定宽度，水平滚动条也不起作用？

问题描述

正如问题所提到的，我的水平滚动条不起作用，我正在开发一个反应应用程序，我正在尝试构建一个小的 TableData 组件，这是我渲染的 jsx 代码：

<table>
        <div className="co-table">
                <div className="co-table__long">
                    <div className="co-table__header">
                        <div className="co-table__header--col">
                            {" "}
                            <span>Date d'operation</span>{" "}
                        </div>
                        <div className="co-table__header--col">
                            {" "}
                            <span>Type de Mouvement</span>{" "}
                        </div>
                        <div className="co-table__header--col">
                            {" "}
                            <span>Montant ($$) </span>{" "}
                        </div>
                    </div>
                    <div className="co-table__corps">
                        <div className="co-table__corps--head">head</div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                    </div>
                    <div className="co-table__corps">
                        <div className="co-table__corps--head">head</div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                    </div>
                    <div className="co-table__corps">
                        <div className="co-table__corps--head">head</div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                    </div>
                </div>
            </div>
</table>

我知道这是很多代码，但它是重复的代码，我将详细解释我想要实现的目标，这是我的 SASS 文件：

.co-table {
width:300px;
height: 150px;


&__long {
    width: 300px;
    height: 150px;
    overflow-x: scroll;
    &:after {
        content: "";
        clear: both;
    }
}

&__header {
    display:inline-block;
    width:100px;
    height: 150px;
    float: left;

    &--col {
        width:100px;
        height: 50px;
        background: #333;
        color:white;
        span {
            font-size:13px;
            padding:10px 0;
        }
    }
}


&__corps {
    display:inline-block;
    float: left;
    height: 150px;
    &--head {
        width:60px;
        height: 150px;
        background:lightgray;
        float: left;

    }
    &--row {
        float: left;
        width:100px;
        height: 150px;
    }
    &--column {
        width:100px;
        height: 50px;
        border:1px solid lightblue;
    }
}

&:after {
    content: "";
    clear:both;
}


}

正如您在我的 SASS 文件中看到的那样，我正在尝试将水平滚动条添加到具有 **** co-table__long **** 类的 div 中，但它不起作用，该 div 有它的孩子，它们的总宽度大于700 像素，我将父宽度固定为 300 像素，这样我就可以看到水平滚动条 .. 而不是看到垂直滚动条，我也看到水平滚动条但不工作..

这是我要找的东西：在此处输入图像描述

这是我工作的链接，我希望它会起作用：

https://codesandbox.io/s/y03696lrl9

任何帮助将非常感激。

标签： htmlcsssassscrollbar

解决方案

从此更改“co-table__long”的CSS：

.co-table__long {    
    height: 150px;
    overflow-x: scroll;
}

进入这个：

.co-table__long {    
    max-width: 300px;
    height: 150px;
    overflow: auto;
}

您需要在使用“溢出”的元素中设置“宽度/最大宽度”

检查此代码框链接

推荐阅读