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。

它是第一个叫做“附表”的模式

Answer 1

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

你可以试试这些：

1）大幅减少字体大小 2）减少表中的填充 3）检查表列没有设置最小宽度 4）重组表格以垂直显示 5）使用javascript或jquery隐藏溢出，除非用户点击更多

我会按此顺序尝试。

响应式HTML表切割美孚

1 个答案: