Question

我仍然是新手，非常感谢您提供的任何帮助。

我正在尝试阻止HTML表格超出页面长度。我目前正在使用PHP解析csv并将数组信息循环到HTML表中。

该表格将在静态1080p屏幕上显示，因此表格本身需要通过缩小单元格来调整大小，而不是水平或垂直地离开页面。我不介意细胞变得如何被压扁，因为它们用CSS进行颜色编码。

我有太多代码要发布在这里，所以我将发布我试图用来包含我的表格的CSS样式代码。

  <style>

    html,body {
        background-color: #F4F4F4
        margin: 0;
        padding: 0;
        height: 100%;
        border: 0;
    }

    table{
        height:100%;
        width:100%;
        overflow: hidden;
        white-space: nowrap;
    }

    td {
        border: 1px solid black;
        resize: both;
        overflow: hidden;
    }

    th {
        resize: both;
        overflow: auto;
    }

</style>

我尝试过上述不同的变化，但无济于事溢出设置，调整大小设置等这只是我目前的测试。

我不关心是否必须使用HTML，CSS，Javascript，JQuery或PHP。我宁愿不必完全重新开始。

Answer 1

尝试使用

table {

  table-layout: fixed;
  width: 100%;

}

有关详情Fixed Table Layouts. 希望这会有所帮助。

Answer 2

尝试将其包含在您的代码中：

td.wordbreak {
    word-break: break-all;
    width: NNNpx;
}

这应该对细胞水平吐出表格的问题进行排序。将NNN替换为以像素为单位的数字，这可能只是您需要的总数的一小部分。

所以，让我们说你只有两列，那就是：

table {

  table-layout: fixed;   width: 100%;

}

td
{   
   word-break: break-all;   
   width: 540px; 
}

如何防止PHP推送的HTML表超过页面的长度

2 个答案: