PHP Script: overflow property controlling echoed cross-browser table whose content exceeds element's box size

This script is called overflow-property-controlling-echoed-cross-browser-table-whose-content-exceeds-elements-box-size.php

In searching the Internet, we found no evidence of a PHP script illustrating the use of the overflow property to control echoed cross-browser table whose content exceeds element's box size. We used this in View Scheduler and Edit Scheduler and it displayed MySQL table contents.

For our test, below, we simply use three arrays with too much content to fit within the width of the 94 pixel wide table cell boxes we defined in the CSS styles. The content that passed the right edge of the cells simply disappeared. It is easy to define CSS styles that let the boxes expand to encompass the content (just don't define the width attribute), and defining CSS styles that let the boxes' content wraparound to the next line is easy too, by use of the scroll property. And of course you can add a break tag or two in your content so that it is forced into multiline display. We found a need to store actual <BR> tags in a MySQL table to separate two names that we wanted on separate lines in a table cell. If you need word-wrap to break long words like URLs in a relatively small table cell, you can use styles like width:150px;max-width:150px;min-width:150px;word-wrap:break-word; which we did in our message inbox script, using width:824px;border:1px solid blue;text-align:center;table-layout:auto to style the table this cell resided in. The idea was to keep the table all on a 1024 pixel wide screen, cross-browser, with no horizontal scrollbar needed, regardless of content. Content without specific styles to prevent it will enlarge a table and force a scrollbar when the content makes it do so.

The styles on the script below are similar to the styles in Edit Scheduler, where it was essential that all table cells were a set amount apart in vertical and horizontal directions so that editing could occur by clicking in cell boxes after selecting names from a dropdown list. Since there were no links on words, this relied on cross-browser cursor position reading and the use of Ajax to edit the MySQL table on the fly onscreen with no page refresh. We forced not only exact table size and position on the screen, but also specific behavior of content getting displayed in table cells.

For our test, below, we used three for loops to fill the table cells with array element values. Note that the side column of table cells uses padding to position content. The best way to do this is with an external div that defines the size and an internal div with the padding styles. This seems to work best in all the browsers. The table cells get this style for sizing: width:94px;height:30px;max-width:94px;min-width:94px;max-height:30px;min-height:30px; and these styles for dealing with content overflow: overflow:hidden;white-space:nowrap;. If you really need table cell sizes to be precise and absolute, cross-browser, max-width and max-height need to supplement width and height attributes.

This script is called overflow-property-controlling-echoed-cross-browser-table-whose-content-exceeds-elements-box-size.php

Free Personal Status Boards (PSB™)

PHP Script: overflow property controlling echoed cross-browser table whose content exceeds element's box size