Question

I have a table which is “pulled” from a MYSQL DB and users can use the dropdown boxes and save to MYSQL. All of it works- but the table doesn’t fit the DIV and looks an awful mess. Is there a away I can have a horizontal scroll bar to scroll across the table?

How can I put this table in a table that is 1100×545 px …it will overflow, but it needs to fit the div. And I would like it to over flow horizontally

echo "<table style=\"float:left;\" width=\"130\" border=\"0\" >";
                foreach($Data as $Item => $Value) {
            if(!is_numeric($Item) && $Item !== "UserIDHere") {
                if($i == 0) {
                    $Unit = substr($Item, 0, 2);
                    $Assignment = substr($Item, 2, 2);
                    $Task = substr($Item, 4, 2);

                    echo "<tr style=\"text-align: center\"><td colspan=\"4\"><p>".$UArr[$Unit]."</p></td></tr>";
                    echo "<tr style=\"text-align: center\"><td colspan=\"4\"><p>".$AArr[substr($Item, 2, 2)]."</p></td></tr>";
                    echo "<tr><td width=\"60\">".$TArr[$Task]."</td><td width=\"50\">".DropDown($Item, $Value)."</td></tr>";

                }
                if($Unit !== substr($Item, 0, 2)) {
                    echo "</tr>";
                    echo "</tr>";
                    echo "<table style=\"float:left;\" width=\"150\" border=\"0\" >";
                    $Unit = substr($Item, 0, 2);
                    echo "<tr style=\"text-align: center\"><td colspan=\"4\"><p>".$UArr[substr($Item, 0, 2)]."</p></td></tr>";
                }
                if($Assignment !== substr($Item, 2, 2)) {
                    $Assignment = substr($Item, 2, 2);
                    echo "<tr style=\"text-align: center\"><td colspan=\"4\"><p>".$AArr[substr($Item, 2, 2)]."</p></td></tr>";
                }
                if($Task !== substr($Item, 4, 2)) {
                    $Task = substr($Item, 4, 2);
                    echo "<tr><td width=\"60\">".$TArr[$Task]."</td><td width=\"50\">".DropDown($Item, $Value)."</td></tr>";
                }
                $i++;
            }

        }
        echo "</table>";

The CSS of this is

.full-segment
{
    width: 1100px;
    height: 545px;
    overflow: scroll;
}

How do I make it so the overflow is horizontal ) so you slide horizontal and not vertically?

Answer 1

Put the <div> outside the scope of the <table>. So your code should look like:

echo "<div foo='bar' foo2='bar2'>
<table foo='bar' foo2='bar2'>";
//populate the table here
echo "</table></div>";

The default CSS setting of overflow:auto will take care of the rest.

EDIT: The default CSS setting is not overflow:auto. It’s overflow:visible. My mistake. You need to declare overflow:auto explicitly in the style attribute.

UPDATE: Making the fields go horizontally requires putting them into the same <tr> tags. Each different <tr> tag will result in a new row (on a new line) in the table. For that, you’ll want to rethink your grouping and how you’re placing those <tr> tags, and how many fields you want in one row. Unfortunately, that’s something you’ll have to experiment with yourself until you find the right look for you.

Also, tables within tables, while they work, can cause loads of trouble if you don’t close them properly. You probably want to make sure that that piece of code is doing what you want it to do.