javascript - CSS - 如果窗口太小，则滚动条出现在表格单元格上

Question

好吧，我一直在挖掘，但还没有找到解决我问题的办法我会尽力解释。

我有一个用表格创建的网站(不要问)，这个网站有一个非固定的顶部菜单，由一个表格行和三个表格列组成，一个用于图像 Logo ，一个用于按钮的名称和最后一个作为菜单， Logo 和名称位于左侧。

菜单是这里的问题，它由单个 ul 元素和固定宽度的 li 元素组成。这是一个小例子:

<table>
    <tr>
        <td><img src="logo.png"></td>
    </tr>
    <tr>
        <td><span>COMPANY NAME HERE</span></td>
    </tr>
    <tr>
        <td>
            <ul>
                <li style="width: 100px">button 1</li>
                <li style="width: 100px">button 2</li>
                <li style="width: 100px">button 3</li>
                <li style="width: 100px">button 4</li>
                <li style="width: 100px">button 5</li>
            </ul>
        </td>
    </tr>
</table>

菜单变大了，现在按钮太多了。在较小的屏幕上，这会在整个页面上创建一个水平滚动条。

这是我的任务，所以我现在的问题是，如果窗口太小无法容纳所有菜单按钮，我必须在菜单按钮上创建一个水平滚动条(再次不要问)，但仅限于按钮。

作为引用，li 元素同时具有 display: table-cell 和 display: inline-block 属性，似乎表格单元格正在覆盖内联 block

编辑:

抱歉，忘了补充:按钮水平显示。这是当前 li

的 CSS

text-align: center;
position: relative;
font-size: 12px;
text-transform: uppercase;
display: inline-block;
background: linear-gradient(-35deg, transparent 40px,rgba(0,0,0,0.15) 41px,rgba(0,0,0,0.15) 86px,transparent 87px);
min-width: 120px;
display: table-cell;

ul 本身具有以下 CSS:

list-style: none;
margin: 0;

Answer 1

我有一个 CSS 和 JS 的混合解决方案，它也适用于调整窗口大小。

它不漂亮(但你问的也不是!:P)

使用overflow-x , 你需要设置一个固定的 width .

只需在菜单 td 中添加一个类，例如 <td class="menu"> (只是为了更好的定位)。

现在在 CSS 上添加:

td.menu {
  overflow-x: auto;
}

使用 JS，您现在可以获取 BODY 元素宽度(或您认为合适的任何其他容器元素)并更新 .menu max-width使用该值，在脚本加载和窗口调整大小时。

这是完整的 JS:

var menuW, bodyW;
var updateSize = function() {
  // Get the menu size
  menuW = $(".menu").width();
  // Get the body size
  bodyW = $("body").width();
  // Update menu with body size
  $(".menu").css("maxWidth", bodyW);
}

// If you need this to happen on window resize
$(window).resize(function() {
  updateSize();
});

// Update the size at the script load
updateSize();

在这里查看工作 fiddle :https://jsfiddle.net/fabio_silva/thrbgz4o/