Databases
StackOverflow2013
Postsdbo
POPHP HTML table is too wide
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPHP HTML table is too wide
    text
    copied!<p>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?</p> <pre><code>&lt;?php echo "&lt;table&gt; &lt;tr&gt; &lt;th&gt;id&lt;/th&gt; &lt;th&gt;700-number&lt;/th&gt; &lt;th&gt;First name&lt;/th&gt; &lt;th&gt;Last name&lt;/th&gt; &lt;th&gt;Email&lt;/th&gt; &lt;th&gt;Response&lt;/th&gt; &lt;th&gt;Created On&lt;/th&gt; &lt;/tr&gt;"; $num = mysql_num_rows($result); for ($i = 0; $i &lt; $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 "&lt;tr&gt;"; echo "&lt;td class=" . $class . "&gt;$id&lt;/td&gt;"; echo "&lt;td class=" . $class . "&gt;$school_id&lt;/td&gt;"; echo "&lt;td class=" . $class . "&gt;$fname&lt;/td&gt;"; echo "&lt;td class=" . $class . "&gt;$lname&lt;/td&gt;"; echo "&lt;td class=" . $class . "&gt;$email&lt;/td&gt;"; echo "&lt;td class=" . $class . "&gt;$attending&lt;/td&gt;"; echo "&lt;td class=" . $class . "&gt;$date&lt;/td&gt;"; echo "&lt;/tr&gt;"; } ?&gt; &lt;/table&gt; </code></pre> <p><strong>EDIT</strong></p> <p>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.</p> <p><strong>EDIT</strong></p> <p>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?</p> <p><strong>EDIT</strong></p> <p>Finally got this working right with wordwrap and sizing the tags manually. Here is the correct code:</p> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;th width="16px"&gt;ID&lt;/th&gt; &lt;th width="81px"&gt;700&lt;br /&gt;Number&lt;/th&gt; &lt;th width="90px"&gt;First&lt;br /&gt;Name&lt;/th&gt; &lt;th width="90px"&gt;Last&lt;br /&gt;Name&lt;/th&gt; &lt;th width="181px"&gt;E-Mail&lt;/th&gt; &lt;th width="74px"&gt;Attending&lt;/th&gt; &lt;th width="82px"&gt;Created&lt;br /&gt;On&lt;/th&gt; &lt;/tr&gt; &lt;?php $num = mysql_num_rows($result); for ($i = 0; $i &lt; $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 "&lt;tr&gt;"; echo "&lt;td class=" . $class . "&gt;$wrap_id&lt;/td&gt;"; echo "&lt;td class=" . $class . "&gt;$wrap_school_id&lt;/td&gt;"; echo "&lt;td class=" . $class . "&gt;$wrap_fname&lt;/td&gt;"; echo "&lt;td class=" . $class . "&gt;$wrap_lname&lt;/td&gt;"; echo "&lt;td class=" . $class . "&gt;$wrap_email&lt;/td&gt;"; echo "&lt;td class=" . $class . "&gt;$wrap_attending&lt;/td&gt;"; echo "&lt;td class=" . $class . "&gt;$wrap_date&lt;/td&gt;"; echo "&lt;/tr&gt;"; } ?&gt; &lt;/table&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload