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

Question

I am still a novice and would appreciate any assistance you can provide.

I am trying to prevent an HTML table from exceeding the length of the page. I am currently parsing a csv with PHP and looping the array information into an HTML table.

The table is to be shown on a static 1080p screen so the table itself needs to resize by shrinking cells instead of going off the page horizontally or vertically. I dont mind how squashed the cells become as they are colour coded with CSS.

I have too many lines of code to post here so I will just post my CSS style code which I have attempted to use to contain my table.

  <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>

I have tried different variations of the above to no avail e.g. overflow settings, resize settings etc this is just my current test.

I do not care whether I have to use HTML, CSS, Javascript, JQuery or PHP for this. I would rather not have to completely start over however.

Answer 1

Try to include this for your tags:

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

This should sort the problem of cells spiting out your table horizontally. Replace the NNN by a number in pixels, that could be a fraction of the total you need.

So let's say you had only 2 columns, it would be:

table {

  table-layout: fixed;   width: 100%;

}

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