CSS-若窗口太小，滚动条会出现在“表格”单元格上

CSS - Scrollbar appear on Table cell if window is too small

本文关键字：表格 单元格 窗口 滚动条 CSS-      更新时间：2023-09-26

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

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

菜单是这里的问题，它由单个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;

并且CCD_ 7本身具有以下CSS:

list-style: none;
margin: 0;

我为您提供了一个CSS和JS的混合解决方案，它还可以调整窗口大小。

它不漂亮（但你要的也不是！：p）

要使用overflow-x，您需要设置一个固定的width。

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

现在在CSS上，添加以下内容：

td.menu {
  overflow-x: auto;
}

使用JS，您现在可以获取BODY元素宽度（或您认为合适的任何其他容器元素），并在脚本加载和窗口调整时使用该值更新.menumax-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/

此代码可能有效：

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

好的，我终于找到了一个解决方案，这是一个非常非常丑陋的解决方案，因为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和所有人的帮助。

相关文章：