html - 表格显示问题，仅在 Chrome 中

Question

我真的不知道如何处理这个问题，该表在 Firefox/IE 上运行良好

参见:

在 Chrome 上:

这是表格的实际CSS

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;
}

尝试过

table-layout: fixed;

不工作。

根据要求，我使用 echo 在 php 中显示表格:

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>";

Answer 1

您的标记是 invalid .始终使用 validator 检查您的标记.

因此，如果您删除 PHP 内容，您将获得:

<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-->

将其更改为:

<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>