Php列表宽度

Question

I'm trying to have my columns the same width, when I have empty columns they are the correct size but when I insert tables from a MySQL database, they change and one column is bigger than the others, the one named 'BristolQualification'. I think it might be something to do with the actual table because I've tried moving BristolQualification around and it's the same size in each different column. There are two BathQualification because I was just playing around and testing. Does anyone know why this could be happening? I've tried replacing them with width="25%" (because there are 4 columns 25*4 = 100%).

<?php 
mysql_connect("host", "user", "pwd") or die(mysql_error()); 
mysql_select_db("db") or die(mysql_error());

$data = mysql_query("
SELECT  
`Bath`.`BathCountry` ,  
`Bristol`.`BristolCountry` ,  
`Bath`.`BathQualification` ,  
`Bristol`.`BristolQualification` 
FROM  
`Bristol` 
LEFT JOIN  
`Bath` 
ON  
`Bristol`.`BristolCountry` =  `Bath`.`BathCountry` 
ORDER BY  
`Bristol`.`BristolCountry`;
") 
or die(mysql_error());

Echo "<table class=\"imagetable\" border cellpadding=3 style=\"width:100%;\">"; 
while($info = mysql_fetch_array( $data )) 
{ 
Echo "<tr>"; 
Echo "<th width=\"100\">Country:</th>
   <th class=\"Bristol\" width=\"100\">Qualifications to Bristol:</th>
   <th class=\"USW\" width=\"100\">Qualifications to USW:</th> 
   <th class=\"Bath\" width=\"100\">Qualifications to Bath:</th>"; 
Echo "</tr>";
Echo "<tr>";
Echo "<td width=\"100\">".$info['BristolCountry'] . "</td> 
   <td class=\"Bristol2\" width=\"100\">".$info['BathQualification'] . " </td> 
   <td class=\"Bath2\" width=\"100\">".$info['BathQualification'] . " </td> 
   <td class=\"USW2\" width=\"100\">".$info['BristolQualification'] . " </td> "  ;
Echo "</tr>"; 
 } 
 Echo "</table>"; 
 ?>

Answer 1

You should use this CSS properties : word-break:break-all; word-wrap:break-word(force your content to fit the block's width) and table-layout:fixed to your table.

table {
    word-break:break-all;
    word-wrap:break-word;
    table-layout:fixed;
}