如何防止PHP pushed HTML 表超过页面长度

Question

我还是个新手，如果您能提供任何帮助，我将不胜感激。

我正在尝试防止 HTML table 超出页面长度。我目前正在用 PHP 解析 csv 并将数组信息循环到 HTML table.

table 将在静态 1080p 屏幕上显示，因此 table 本身需要通过缩小单元格而不是水平或垂直离开页面来调整大小。我不介意细胞被压扁的程度，因为它们用 CSS.

进行了颜色编码

这里 post 的代码行太多，所以我只 post 我试图用来包含我的 table 的 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;
}

这应该解决单元格水平吐出 table 的问题。将 NNN 替换为以像素为单位的数字，这可能是您需要的总数的一小部分。

假设您只有 2 列，则为：

table {

  table-layout: fixed;   width: 100%;

}

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

如何防止PHP pushed HTML 表超过页面长度

How to prevent PHP pushed HTML tables exceeding the length of the page

php

html

css

screen

html-table