html - 响应式 HTML 表格在移动设备上剪切

Question

在 Bootstrap-Modal 中，我有一些 Div 和一个表格。 在桌面上浏览时一切正常，但当我在手机上打开网站时，大部分表格都被切断了。

HTML:

<div class="modal portfolio-modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content table-responsive">
        <div class="close-modal" data-dismiss="modal">
            X
        </div>
        <div class="container eventContainer table-responsive">
            <div class="row tableScroll table-responsive">
                <div class="col-lg-12 tableScroll table-responsive">
                    <div class="modal-body tableScroll table-responsive">
                        <div class="eventTableDiv tableScroll table-responsive" id="eventTableDiv">
                        </div>
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

@media (max-width: 768px) {
    table,
    .eventContainer,
    .eventTable,
    .tableScroll,
    .modal,
    .modal-content,
    .row,
    .modal-body{
        overflow-x: auto;
        display: block;
    }
    .eventTable {
        font-size: 10px;
    }
}

以及我用来渲染表格的 JS:

function generateEventList(){
var htmlString = "<label class='eventLabel'>Events</label><br><table class='eventTable tableScroll'><tr class='tableHeader'><th>When</th><th>Concert Hall</th><th>Event</th><th>Programm</th><th>Ensemble</th   ></tr>";
var arrayLength = eventListe.length;
for (var i = 0; i < arrayLength; i++) {

    htmlString = htmlString.concat("<tr class='tableRow'>");
    for (var s = 0; s<5; s++) {
        htmlString = htmlString.concat("<td class='tableData'>"+eventListe[i][s]+"</td>");
    }
    htmlString = htmlString.concat("</tr>");
}
htmlString=htmlString.concat("</table><br><br>");
document.getElementById("eventTableDiv").innerHTML = htmlString;
}

我尝试了在 SO 和其他地方可以找到的所有东西。

可以找到网站here .

它是第一个名为“Schedule”的模态

Answer 1

查看了您的网站，您需要根据移动用户重新考虑您的表格。很难在移动设备上显示这么宽的表格。

你可以试试这些:

1) 大幅减小字体大小 2)减少表中的padding 3) 检查表格列的最小宽度没有设置 4)重组表格以垂直显示 5) 除非用户点击更多，否则使用javascript或jquery overflow hidden

我会按这个顺序尝试。