Some CSS with while loop

[tibor.marias]

Evening Sirs,

I got some problems in PHP when using while loop in tables. My problem is that I can't make the rows be the same width.
This is my preview:

I want the blue part of the table, to be equal width with every relative white part. And the white parts to be equal with each other. Here is my CSS:

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;    
}

.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;         
}

.bordered tr:hover {
    background: #fbg8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}    

.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left; 
    width: 12%;
    min-width:12%;
    }

.bordered th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
    height:5px;
}

.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}

.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    border-bottom:0;
}

.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

.bordered td:hover {
background: #CCC;
}

.bordered td:last-child {
width:-15px;
}

And here is my while loop:

print '<table name="bordered" class="bordered"><thead><tr>
        <th>Név</th>        
        <th>Telefonszám</th>
        <th>Kerület</th>
        <th>Utca</th>
        <th>Házszáms</th>
        <th>Weboldal</th>
        <th>Dátum</th>
        <th>Megjegyzés</th>
        <th>Feltöltötte</th>
        <th><img src="http://www.fundis.hu/images/package_settings.png" height="20px" width="20px"></th>
    </tr>
    </thead>';
 while($info = mysql_fetch_array( $data )) 
 { 

print '<table name="bordered" class="bordered"><tr>
        <td>'.$info[1]. ' '.$info[10].'</td>
        <td class="masterTooltip" title="'.$info['number'].'">06'.mb_substr($info['number'], 0, 9).'</td>
        <td>'.$info[3].'</td>
        <td>'.$info['street'].'</td>
        <td>'.$info['house_number'].'</td>
        <td class="masterTooltip" title="'.$info[9].'"><a href="'.$info[9].'"  target="_blank">link</a></td>
        <td>'.$info[7]. ' '.$info['appointment_time'].'</td>
        <td class="masterTooltip" title="'.$info[8].'">Megtekint</td>
        <td class="masterTooltip" title="'.$info[11].'">'.mb_substr($info[11], 0, 4).'</td>';
if ($info[11] === $user_data['username']) {
        print '<td><center><a href="http://www.fundis.hu/edit.php?id='.$info[0].'"><img src="http://www.fundis.hu/images/package_settings.png" height="20px" width="20px"></a></center></td></tr></table>';
        } else  {

        print '<td><center><img src="http://www.fundis.hu/images/package_settings_black.png" height="20px" width="20px"></center></td></tr></table>';

    }

I would be really happy if you could tell me what to change in CSS or in the HTML table to solve this issue.

Many thanks in advance,

Tibor

[Atli]

You seem to be printing each row in a separate table. If you were to print each row in an actual row inside a single table, then the browser would automatically adjust things so all the fields in a column had the same width.

The browser's behaviour to automatically adjust table cell width to accommodate varying sizes of it's data is very hard to reliably override. At least not in any half decent manner.

[tibor.marias]

Yes, I made ended my table outside the while loop and it worked thanks!