PHP HTML table is too wide

Question

I have a table that I cannot get to size correctly. The table populates with information from a database via a loop. Sometimes if the data is too long the table extends past where it should. When the data is that long I want the data to wrap in the cells so the table stays where it should. I have tried the normal table data but it isn't working. Any ideas?

<?php
    echo "<table>
        <tr>
            <th>id</th>
            <th>700-number</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Email</th>
            <th>Response</th>
            <th>Created On</th>
        </tr>";

    $num = mysql_num_rows($result);

    for ($i = 0; $i < $num; $i++)
    {
        $row = mysql_fetch_array($result);

        $id = $row['id'];
        $school_id = $row['school_id'];
        $fname = $row['first_name'];
        $lname = $row['last_name'];
        $email = $row['email'];
        $attending = ($row['attending'] == 0) ? 'No' : 'Yes';
        $date = $row['created_on'];

        $class = (($i % 2) == 0) ? "td2" : "td1";

        echo "<tr>";
            echo "<td class=" . $class . ">$id</td>";
            echo "<td class=" . $class . ">$school_id</td>";
            echo "<td class=" . $class . ">$fname</td>";
            echo "<td class=" . $class . ">$lname</td>";
            echo "<td class=" . $class . ">$email</td>";
            echo "<td class=" . $class . ">$attending</td>";
            echo "<td class=" . $class . ">$date</td>";
        echo "</tr>";
    }
?>
</table>

EDIT

This table is displayed in a container that is fixed to 800px wide, so setting a percentage for the table will not work. I want to set it to a specific pixel size, like 600px. I would also rather not edit the CSS, I want to fix the size by modifying the code I have posted.

EDIT

There has to be someone who knows the answer to this. I have tried all the suggestions so far, in HTML and CSS but to no avail. I know it has to be some small problem with my code that I am just not seeing (i.e. an open tag, a missing semi-colon, a single quote where it should be a double quote, ect.). I have been using firebug trying to track down the cause of this problem and I have found that when I remove all data from the CSS classes .td1 and .td2 that the width I have specified sticks just fine. Is there some reason the width would get messed up by a CSS class?

EDIT

Finally got this working right with wordwrap and sizing the tags manually. Here is the correct code:

<table>
    <tr>
        <th width="16px">ID</th>
        <th width="81px">700<br />Number</th>
        <th width="90px">First<br />Name</th>
        <th width="90px">Last<br />Name</th>
        <th width="181px">E-Mail</th>
        <th width="74px">Attending</th>
        <th width="82px">Created<br />On</th>
    </tr>
<?php
$num = mysql_num_rows($result);

for ($i = 0; $i < $num; $i++)
{
    $row = mysql_fetch_array($result);

    $id = $row['id'];
    $school_id = $row['school_id'];
    $fname = $row['first_name'];
    $lname = $row['last_name'];
    $email = $row['email'];
    $attending = ($row['attending'] == 0) ? 'No' : 'Yes';
    $date = $row['created_on'];

    $wrap_id = wordwrap($id, 4, "\n", TRUE);
    $wrap_school_id = wordwrap($school_id, 9, "\n", TRUE);
    $wrap_fname = wordwrap($fname, 10,"\n", TRUE);
    $wrap_lname = wordwrap($lname, 10, "\n", TRUE);
    $wrap_email = wordwrap($email, 20, "\n", TRUE);
    $wrap_attending = wordwrap($attending, 3, "\n", TRUE);
    $wrap_date = wordwrap($date, 10, "\n", TRUE);

    $class = (($i % 2) == 0) ? "td2" : "td1";

    echo "<tr>";
        echo "<td class=" . $class . ">$wrap_id</td>";
        echo "<td class=" . $class . ">$wrap_school_id</td>";
        echo "<td class=" . $class . ">$wrap_fname</td>";
        echo "<td class=" . $class . ">$wrap_lname</td>";
        echo "<td class=" . $class . ">$wrap_email</td>";
        echo "<td class=" . $class . ">$wrap_attending</td>";
        echo "<td class=" . $class . ">$wrap_date</td>";
    echo "</tr>";
}

?>

</table>

Answer 1

You should use width property on col tags <col width="60px"> to set width of each column and not on <th> tags. Now content will wrap the whole words to the size of the col width property or to the size of the longest string in a row. Use css break-word on <td> tag

word-wrap: break-word;

to keep the exact size as set in col width property.

Answer 2

Fix the Height and width of the table so as to get the wrapped up data into the table...

Also you can use wordwrap function Wraps a string to a given number of characters using a string break character.

syntax: string wordwrap ( string $str [, int $width = 75 [, string $break = "\n" [, bool $cut = false ]]] )

str

    The input string.
width

    The column width.
break

    The line is broken using the optional break parameter.
cut

    If the cut is set to TRUE, the string is always wrapped at or before the specified width. So if you have a word that is larger than the given width, it is broken apart. (See second example).


Returns the given string wrapped at the specified column. 

UPDATED REPLY

As per your edited question it's better for you to use word wrap as I have explained above..

For Example:

<?php
$text = "Typoking wants to know about "Php html table is too wide".";
$newtext = wordwrap($text, 20, "<br />\n");

echo $newtext;
?>

The above example will output:

Typoking wants to kn<br />
ow about "Php html t<br />
able is too wide".

For more information go to : PHP.net

EDITED

As per your CSS issue, open up your css file, and write "!important" beside the class which is being used by "<td>". This will prefer your CSS class to apply than inline style. Also provide the way you are applying the word-wrap...

Answer 3

Use like this, you will get correct answer. Onething you can adjust no of character in wordwrap according the width.

<?php
    echo "<table width='800'>
        <tr>
            <th width='50'>id</th>
            <th width='100'>700-number</th>
            <th width='150'>First name</th>
            <th width='150'>Last name</th>
            <th width='100'>Email</th>
            <th width='150'>Response</th>
            <th width='100'>Created On</th>
        </tr>";

    $num = mysql_num_rows($result);

    for ($i = 0; $i < $num; $i++)
    {
        $row = mysql_fetch_array($result);

        $id = $row['id'];
        $school_id = $row['school_id'];
        $fname = $row['first_name'];
        $lname = $row['last_name'];
        $email = $row['email'];
        $attending = ($row['attending'] == 0) ? 'No' : 'Yes';
        $date = $row['created_on'];

        $class = (($i % 2) == 0) ? "td2" : "td1";

        echo "<tr>";
            echo "<td class=" . $class . ">$id</td>";
            echo "<td class=" . $class . ">wordwrap($school_id, 8, '\n', 1); </td>";
            echo "<td class=" . $class . ">wordwrap($fname, 15, '\n', 1);</td>";
            echo "<td class=" . $class . ">wordwrap($lname, 20, '\n', 1);</td>";
            echo "<td class=" . $class . ">wordwrap($email, 20, '\n', 1);</td>";
            echo "<td class=" . $class . ">wordwrap($attending, 30, '\n', 1);</td>";
            echo "<td class=" . $class . ">wordwrap($date, 10, '\n', 1);</td>";
        echo "</tr>";
    }
?>
</table>

Answer 4

Try setting the style to

word-wrap: break-word;

(I assume you have data with no spaces which is causing the table to expand.) You may also have to explicitly set the width of the table.