Question

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

我有一个在表格中创建的网站（不要问），这个网站有一个非固定的顶层菜单，由一个包含三个表格列的表格行组成，一个用于图像徽标，一个用于名称，最后一个用于按钮作为菜单，徽标和名称位于左侧。

菜单是此处的问题，它由具有固定宽度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属性，似乎表格单元格覆盖了内联块

编辑：

抱歉，忘了添加：水平按钮出现。这是当前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();

在这里查看一个工作小提琴：https://jsfiddle.net/fabio_silva/thrbgz4o/

Answer 2

此代码可能有效：

$(document).ready(function(){
if($('table tr td').innerHeight()<120)
$(this).css('overflow-y','scroll');
});

Answer 3

好的，我终于找到了一个解决方案，它是一个非常非常丑陋的解决方案，因为 TRUE 解决方案是摆脱表格。但它仍然是一种解决方案。

我在页面底部添加了以下javascript代码：

if(window.innerWidth <= 1880){
    document.getElementById('top-menu-buttons').style.width = (window.innerWidth - 390) + 'px';
}else{
    document.getElementById('top-menu-buttons').style.width = '';
}

在window.onresize = function()块中包含类似的代码以防万一，ul现在有以下css：

list-style: none;
margin: 0;
overflow-x: auto;

感谢 Tom Doodler 以及所有人的帮助。

CSS - 如果窗口太小，滚动条将出现在表格单元格中

3 个答案: