html - 语义UI表水平滚动时如何使右列固定

Question

我在语义 ui 中创建具有长数据的表，如何使包含操作按钮的最后一列在滚动时保持可见(固定位置)？我已经搜索过但没有令人满意的解决方案。

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/>
<div class="ui segment" style="padding: 0px; overflow-x: scroll;"><table class="ui selectable single line compact table slide down visible transition"><thead class=""><tr class="left aligned"><th class="">Name</th><th class="">Type</th><th class="">Percent</th><th class="">Value</th><th class="">Max Value</th><th class="">Begin Date</th><th class="">Expired Date</th><th class="">Selected Product?</th><th class="">Priority</th><th class="">ezPay Available?</th><th class="">merchant Available?</th><th class="">All Merchant?</th><th class=""></th></tr></thead><tbody class=""><tr class="" style="background: rgb(255, 89, 0);"><td class="">fwfewfwe</td><td class="">Default Test</td><td class="">12</td><td class="">0</td><td class="">90000</td><td class="">2019/10/26 15:05</td><td class="">2019/10/26 15:05</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="">1</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class=""><div class="ui buttons"><button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button><button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button></div></td></tr><tr class="" style="background: rgb(255, 89, 0);"><td class="">123</td><td class="">Default Test</td><td class="">0</td><td class="">69000</td><td class="">0</td><td class="">2019/10/20 14:43</td><td class="">2019/10/21 14:43</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="">1</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class=""><div class="ui buttons"><button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button><button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button></div></td></tr><tr class="" style="background: rgb(255, 89, 0);"><td class="">grgrb egeh</td><td class="">Default Pulsa Rule Cashback</td><td class="">0</td><td class="">43545345</td><td class="">0</td><td class="">2019/10/20 14:45</td><td class="">2019/10/30 14:45</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="">1</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class=""><div class="ui buttons"><button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button><button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button></div></td></tr></tbody></table></div>

这是我的 code

Answer 1

像这样吗？

我刚刚添加了 position:sticky; 和 right:0;, top:0; 到 ::last -td 的 child 。

.ui.table tr td:last-child {
    position: sticky;
    right: 0;
    top: 0;
    background: #333;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<div class="ui segment" style="padding: 0px; overflow-x: scroll;">
    <table class="ui selectable single line compact table slide down visible transition">
        <thead class="">
            <tr class="left aligned">
                <th class="">Name</th>
                <th class="">Type</th>
                <th class="">Percent</th>
                <th class="">Value</th>
                <th class="">Max Value</th>
                <th class="">Begin Date</th>
                <th class="">Expired Date</th>
                <th class="">Selected Product?</th>
                <th class="">Priority</th>
                <th class="">ezPay Available?</th>
                <th class="">merchant Available?</th>
                <th class="">All Merchant?</th>
                <th class=""></th>
            </tr>
        </thead>
        <tbody class="">
            <tr class="" style="background: rgb(255, 89, 0);">
                <td class="">fwfewfwe</td>
                <td class="">Default Test</td>
                <td class="">12</td>
                <td class="">0</td>
                <td class="">90000</td>
                <td class="">2019/10/26 15:05</td>
                <td class="">2019/10/26 15:05</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">1</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">
                    <div class="ui buttons">
                        <button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
                        <button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
                    </div>
                </td>
            </tr>
            <tr class="" style="background: rgb(255, 89, 0);">
                <td class="">123</td>
                <td class="">Default Test</td>
                <td class="">0</td>
                <td class="">69000</td>
                <td class="">0</td>
                <td class="">2019/10/20 14:43</td>
                <td class="">2019/10/21 14:43</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">1</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">
                    <div class="ui buttons">
                        <button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
                        <button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
                    </div>
                </td>
            </tr>
            <tr class="" style="background: rgb(255, 89, 0);">
                <td class="">grgrb egeh</td>
                <td class="">Default Pulsa Rule Cashback</td>
                <td class="">0</td>
                <td class="">43545345</td>
                <td class="">0</td>
                <td class="">2019/10/20 14:45</td>
                <td class="">2019/10/30 14:45</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">1</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">
                    <div class="ui buttons">
                        <button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
                        <button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>