使用 html/css 使表格可滚动

Posted 2023-03-06

【中文标题】使用 html/css 使表格可滚动

【英文标题】：Make a table scrollable with html/css

【发布时间】：2021-03-26 05:42:15

【问题描述】：

我制作了一个仪表板，但在我的 mailPage 中我无法使其可滚动。

如果您有时间检查我的问题，我会上传我的网站。

我的代码

window.addEventListener("load", function () 
    var deleteSVG = '<svg class="deleteSVG" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.2871 5.24297C20.6761 5.24297 21 5.56596 21 5.97696V6.35696C21 6.75795 20.6761 7.09095 20.2871 7.09095H3.71385C3.32386 7.09095 3 6.75795 3 6.35696V5.97696C3 5.56596 3.32386 5.24297 3.71385 5.24297H6.62957C7.22185 5.24297 7.7373 4.82197 7.87054 4.22798L8.02323 3.54598C8.26054 2.61699 9.0415 2 9.93527 2H14.0647C14.9488 2 15.7385 2.61699 15.967 3.49699L16.1304 4.22698C16.2627 4.82197 16.7781 5.24297 17.3714 5.24297H20.2871ZM18.8058 19.134C19.1102 16.2971 19.6432 9.55712 19.6432 9.48913C19.6626 9.28313 19.5955 9.08813 19.4623 8.93113C19.3193 8.78413 19.1384 8.69713 18.9391 8.69713H5.06852C4.86818 8.69713 4.67756 8.78413 4.54529 8.93113C4.41108 9.08813 4.34494 9.28313 4.35467 9.48913C4.35646 9.50162 4.37558 9.73903 4.40755 10.1359C4.54958 11.8992 4.94517 16.8102 5.20079 19.134C5.38168 20.846 6.50498 21.922 8.13206 21.961C9.38763 21.99 10.6811 22 12.0038 22C13.2496 22 14.5149 21.99 15.8094 21.961C17.4929 21.932 18.6152 20.875 18.8058 19.134Z" fill="#200E32"/></svg>'
    nbMail = 100;

    for (i = 0; i < nbMail; i++) 
        document.getElementById("mailTableBody").innerhtml += '<tr class="mail mail' + i + '"><td class="mailSender">[e-mail]</td><td class="mailObject">toto object</td><td class="mailFirstCaracters">Hello World !</td><td class="mailDate">Monday 30 december 2033 11:22PM</td><td>' + deleteSVG + '</td></tr>';
    
);

html
  overflow: hidden;

.mailTableBody
    display: inline-block;
    padding: 2% 2% 2% 2%;
    overflow-y: auto;
    width: 50%;
    height: 67%;

.mail 
    width: 50%;
    height: 80%;
    background: green;
    border: 1px solid black;
    border-radius: 10px;
    box-shadow: 0 0 1px 1px black;
    margin-top: 2%;
    position: relative;
    margin-bottom: 30%;


.deleteSVG
    height: 20%;

<div class="page mailPage" id="mailPage">
        <table class="mailTable">
            <tbody class="mailTableBody" id="mailTableBody">

            </tbody>
        </table>
    </div>

非常感谢。

https://edtmimi.000webhostapp.com/dashBoard/

【参考方案1】：

尝试在您的.mailPage 页面中覆盖html 类的overflow : hidden 属性，如下所示：

.mailPage .page 
    
    /* added below line */
    overflow: scroll !important;

【讨论】：

这可能是因为您在html 上设置了overflow : hidden 选项

我不明白，因为在我的其他页面注释中我覆盖了它并且它的工作:(