CODEWITHSUNDEEP
htmlcssgoogle-chromecss-tables
user3933935
user3933935

Reputation:

Table display issue, only in Chrome

I really don't know how to deal with this, the table works fine on Firefox/IE

See : tablefire/ie

on chrome : tablechrome

here is the actual css of the table

table {
padding: 24px;
margin: 0 auto;
width: 550px;   
}

td#tadmin

td#tabmin {
width: 30px;
height: auto;
float: left;
font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 15px;
}

tried

table-layout: fixed;

do not work.

As asked, I display the table in php using echo: 

echo "<table style='padding:24px;margin:0 auto;width:550px;'>".  
  "<tr>".
     "<td id=tabmin  >".
     "<div class=tabminscale style=text-align:center;>"
     .$row['min']."'"."</div>". 
     "</td>".
       "<td id=tabcom >" .
       "<div id=commentaires>".
       $row['commentaire']."</br>".
       "</td>".
"</tr>".
</div>";

Upvotes: 0

Views: 734

Answers (1)

Vucko
Vucko

Reputation: 20844

Your markup is invalid. Always check you markup with validator.

So, if you remove the PHP stuff, you'll get:

<table style='padding:24px;margin:0 auto;width:550px;'>
    <tr>
        <td id=tabmin>
            <div class=tabminscale style=text-align:center;>foo</div>
        </td>
        <td id=tabcom>
            <div id=commentaires>bar</br> <!-- invalid closing for br tag -->
        </td>
    </tr>
    </div> <!-- wrong -->
    <!-- where's </table>? -->
    <!-- also add quotes to HTML Attributes-->

Change it to:

<table style='padding:24px;margin:0 auto;width:550px;'>
    <tr>
        <td id='tabmin'>
            <div class='tabminscale' style='text-align:center;'>foo</div>
        </td>
        <td id='tabcom'>
            <div id='commentaires'>bar<br/></div>
        </td>
    </tr>
</table>

Upvotes: 1

Related Questions