javascript - 创建一个水平滚动的 Div

Question

我正在尝试构建一个简单的页面布局，顶部的选项卡水平滚动，底部的内容在选项卡下方垂直滚动。

我已经设法使垂直滚动正常工作，并使选项卡保持在顶部，但我无法让选项卡水平滚动。如何实现？

以下是我目前所拥有的。为了简单起见，我删除了所有功能，只处理布局。我正在使用 react

react 组件:

var SimpleTabs = React.createClass({

    render: function(){
        var lorem = "Lorem ipsum dolor sit amet... ";
        var sampleText = lorem + lorem + lorem + lorem;

        return(
            <table className={"simple_tabs"}>
                <tr>
                    <td className={"tabsCell"}>
                        <div className={"tabs"}>
                            <span className={"tab"}>{"tab1"}</span>
                            <span className={"tab"}>{"tab2"}</span>
                            <span className={"tab"}>{"tab3"}</span>
                            <span className={"tab"}>{"tab4"}</span>
                            <span className={"tab"}>{"tab5"}</span>
                            <span className={"tab"}>{"tab6"}</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td className={"contentCell"}>
                        <div className={"content"}>
                            {sampleText}
                        </div>
                    </td>
                </tr>
            </table>
            );
    }
});

less 文件:

.simple_tabs {
  height: 100%;
  width: 100%;
}
.tabs > .tab {
  font-size: 20px;
  padding-left: 5px;
  padding-right: 15px;
}

.tabs{
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  height: 20px;
}

.tabsCell{
  height: 20px;
}

.contentCell .content {

  height:100%;
  overflow: scroll;
}

Answer 1

这是一个 working sample ，使用普通的旧 html。

您可能需要为表格添加 table-layout:fixed。

希望它能让你指向正确的方向:)