带有绝对位置的表格溢出自动

Question

我有一个响应表，可以使用overflow-x: auto在较小的屏幕上进行水平滚动（引导程序中的table-responsive类负责此操作）。在每个表格行的末尾，我都有一个主按钮，该按钮与其他按钮一起打开了一个下拉列表。预期的功能是，单击主按钮后，下拉列表将打开，而无需进行其他任何更改。为此，我使用位置relative和absolute。

但是，在最后一行，单击按钮时，由于具有overflow-x:auto属性，因此启用了垂直滚动。如果删除overflow属性，则除表水平滚动外，其他所有功能均按预期工作。这是一个显示问题https://jsfiddle.net/06ck31m5/

的小提琴

function openDropdown(idx) {
    var elem = document.getElementById('dropdown' + idx);
    elem.classList.toggle('show');
}

let btns = document.getElementsByClassName('dropdown-btn');
for(let i = 0; i<btns.length;i++) {
	btns[i].onclick = () => {
    	openDropdown(btns[i].dataset.id);
    };
}

#dropdown1,
#dropdown2 {
    display: none;
    position: absolute;
    right: 0;
    z-index: 1;
}

.table-responsive {
    overflow-y: auto;
    background: gray;
}

.table {
    overflow-x: auto;
}

.button-wrapper {
    position: relative;
}

.show {
    display: block !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Country</th>
                    <th>Random 1</th>
                    <th>Random 2</th>
                    <th>Random 3</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Smith</td>
                    <td>USA</td>
                    <td>Just Filler</td>
                    <td>Ignore This</td>
                    <td>Random</td>
                    <td>
                        <div class="button-wrapper">
                            <button class="dropdown-btn" type="button" data-id="1">Open</button>
                            <div id="dropdown1">
                                <button>Button1</button>
                                <button>Button2</button>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Victor</td>
                    <td>Venezuela</td>
                    <td>Just Filler</td>
                    <td>Ignore This</td>
                    <td>Random</td>
                    <td>
                        <div class="button-wrapper">
                            <button class="dropdown-btn" type="button" data-id="2">Open</button>
                            <div id="dropdown2">
                                <button>Button1</button>
                                <button>Button2</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

有什么想法吗？

Answer 1

如果您的问题是如何使下拉列表超出溢出限制，我昨天回答了a very similar question。

基本上，它需要三个级别：

• 用于建立相对位置的外部容器。
• 用于控制大小和溢出的内容容器。
• 用于对光标做出反应的下拉容器，相对于外部容器（而不是内容容器）定位。

Answer 2

一种可能的解决方案是在“表容器”的底部添加一个填充底部-仅当底部填充不干扰任何内容时，该操作简便快捷。

function openDropdown(idx) {
    var elem = document.getElementById('dropdown' + idx);
    elem.classList.toggle('show');
}

let btns = document.getElementsByClassName('dropdown-btn');
for(let i = 0; i<btns.length;i++) {
	btns[i].onclick = () => {
    	openDropdown(btns[i].dataset.id);
    };
}

#dropdown1,
#dropdown2 {
    display: none;
    position: absolute;
    right: 0;
    z-index: 1;
}

.table-responsive {
    overflow-y: auto;
    background: gray;
    padding-bottom: 35px;
}

.table {
    overflow-x: auto;
}

.button-wrapper {
    position: relative;
}

.show {
    display: block !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Country</th>
                    <th>Random 1</th>
                    <th>Random 2</th>
                    <th>Random 3</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Smith</td>
                    <td>USA</td>
                    <td>Just Filler</td>
                    <td>Ignore This</td>
                    <td>Random</td>
                    <td>
                        <div class="button-wrapper">
                            <button class="dropdown-btn" type="button" data-id="1">Open</button>
                            <div id="dropdown1">
                                <button>Button1</button>
                                <button>Button2</button>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Victor</td>
                    <td>Venezuela</td>
                    <td>Just Filler</td>
                    <td>Ignore This</td>
                    <td>Random</td>
                    <td>
                        <div class="button-wrapper">
                            <button class="dropdown-btn" type="button" data-id="2">Open</button>
                            <div id="dropdown2">
                                <button>Button1</button>
                                <button>Button2</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>