Fitting dynamic text into a table - html

Question

I couldn't find any answers on Google and Stack Overflow on how to fit text into a table so that the words go to the next line. The only solutions I found that were almost helpful were "making table cells fixed, but the text still runs off the page".
When the text is short:
http://puu.sh/d4IQ2/7a7c95512c.jpg
When the text is too long:
http://puu.sh/d4ITM/6edb003a7c.jpg
How do I make it so that the spaces in the table are fixed based on the window size, then have the text that is too long increase the height of the table row and go onto the next line.
For example, my table is like this:
+------+-----+-----+--------+
| 12345|12345|12345| 12345 |
|------+-----+-----+--------|
| 12345| 123 | 1 | 123 |
|------+-----+-----+--------|
|123456|12345| 123 |12345678|
|------+-----+-----+--------|
| 12345| 123 |12345| 1234 |
+-----+-----+-----+---------+
when I want it like this:
+-----+-----+-----+-----+
|12345|12345|12345|12345|
|-----+-----+-----+-----|
|12345| 123 | 1 | 123 |
|-----+-----+-----+-----|
|12345|12345| 123 |12345|
| 6 | | | 678 |
|-----+-----+-----+-----|
|12345| 123 |12345| 1234|
+-----+-----+-----+-----+
style.css:
table, th{
border: 1px solid black;
border-collapse: collapse;
}
th {
table-layout:fixed
padding: 15px;
}
The PHP code is too long, and I don't want to list out all the functions, the rows and text in the cells are looped where I get data from SQL database:
<table style = "width = 100%">
<tr>
<th> looped text </th>
</tr>
</table>

Answer 1

Set the td size equally for each td tag
<td width="25%">Name</td>

Answer 2

Give the columns a specified width in the CSS. This should do the trick.

Answer 3

add this in css file
td {
width : 300px !important;
}

Answer 4

Apply table-layout:fixed to the table element (not the th), and add word-wrap:break-word to the th/td's.
http://jsfiddle.net/5rz1fmvk/

Answer 5

Well,i think a solution is to set a max-width style for your table.In this way the table width won't exceed the given max-width,and the only thing that remains for the value is to go beneath.
<table style="max-width: 500px; width: 500px;">
</table>
Also,specify a width.
Of course the style should be in an extern css file,but you get the idea.Hope it helps.
table{
width: 500px;
max-width:500px
}

Answer 6

try to fixed witdh of th and for td put css word-wrap: break-word; sample below. You can change the width of th.
table{
width:100%:
}
th{
width:30%;
}
td{
word-wrap: break-word;
}