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.
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;
}
try to use
table {
table-layout: fixed;
width: 100%;
}
For more check Fixed Table Layouts. Hope this will help.