How to display database to tables and the text directly go down

Question

i want to display database to tables, but if the text that i want to display is too long, then the text will not directly go down. the text on 'question' not directly enter down. please help

this is my code:

<table class="table">
                        <thead>
                        <tr>
                         <th>No</th>
                         <th>Question</th>
                         <th>A</th>
                         <th>B</th>
                         <th>C</th>
                         <th>D</th>
                         <th>Answer</th>
                         <th>Button</th>
                        </tr>
                        </thead>
                        <tbody>
                        <?php 
                        include "conection.php";
                        $no = 1;
                        $query = mysql_query("SELECT * FROM grammar");
                        if ($query) {
                        while ($row = mysql_fetch_array($query)) {
                            echo "
                                <tr>
                                    <td>".$no."</td>
                                    <td>".$row['question']."</td>
                                    <td>".$row['a']."</td>
                                    <td>".$row['b']."</td>
                                    <td>".$row['c']."</td>
                                    <td>".$row['d']."</td>
                                    <td>".$row['answer']."</td>
                                    <td>
                                        <a href=\"update.php?id=\">Edit</a> |
                                        <a href=\"delete_grammar.php?id=\">delete</a>
                                    </td>
                                </tr>";
                            $no++;
                            }
                        }
                        ?>
                        </tbody>
                    </table>

this is the picture:

read this http://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell — Madhawa Priyashantha, May 02 '16 at 04:46

score 1 · Accepted Answer · answered May 02 '16 at 04:54

Try using word-wrap: break-word; in your style. It makes the string goes down if ever the max widht is reached.

<table class="table">
                        <thead>
                        <tr>
                         <th>No</th>
                         <th>Question</th>
                         <th>A</th>
                         <th>B</th>
                         <th>C</th>
                         <th>D</th>
                         <th>Answer</th>
                         <th>Button</th>
                        </tr>
                        </thead>
                        <tbody>
                        <?php 
                        include "conection.php";
                        $no = 1;
                        $query = mysql_query("SELECT * FROM grammar");
                        if ($query) {
                        while ($row = mysql_fetch_array($query)) {
                            echo "
                                <tr>
                                    <td>".$no."</td>
                                    <td style='width:40%; word-wrap: break-word;'>".$row['question']."</td>
                                    <td>".$row['a']."</td>
                                    <td>".$row['b']."</td>
                                    <td>".$row['c']."</td>
                                    <td>".$row['d']."</td>
                                    <td>".$row['answer']."</td>
                                    <td>
                                        <a href=\"update.php?id=\">Edit</a> |
                                        <a href=\"delete_grammar.php?id=\">delete</a>
                                    </td>
                                </tr>";
                            $no++;
                            }
                        }
                        ?>
                        </tbody>
                    </table>

Here is the sample JSFiddle

It would be better if you would add relevant CSS code here. – Thamilhan May 02 '16 at 05:00 — Thamilhan, May 02 '16 at 05:00

score 0 · Answer 2 · answered May 02 '16 at 05:14

The answer from Lee will get you the result you need but do note that all lengths of words can break that way if they reach a set width which may reduce readability. The screen shot you took puts that column as a question field. That question looks like a potentially unrealistic test of content but it is good to account for oddities. Email address or URL columns can have this issue of overflow problems and readability may not be as much of a need for a user. Most users probably want to be able to quickly read the question and broken words may make that difficult.

If possible when readability is still needed, you could wrap the content of that cell inside of a div that has overflow-x:auto or hidden and width 100% depending on desired result.

This will either cut off such possible rare instances or at least let the user scroll through the text.

The container td would need a specific width in pixels or other unit that isn't variable in order for tables to be handled correctly across all browsers. If you want you can also instead add a pixel width on the div rather than 100% width.

How to display database to tables and the text directly go down

2 Answers2