13

元素内的文本td需要居中，除了Summary和Experience。这似乎只适用于 Firefox/chrome。在 IE8 中，所有td文本都显示为左对齐。无论我尝试什么，它都不会居中。有什么特别的原因会发生这种情况吗？

CSS

#viewAll {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
    margin-left: 10px;
    table-layout: fixed;
}

#viewAll td, #viewAll th {
    font-size: 1.1em;
    border: 1px solid #98bf21;
    word-wrap: break-word;
    text-align: center;
    overflow: hidden;
}

#viewAll tbody td {
    padding: 2px;
}


#viewAll th {
    font-size: 1.1em;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #A7C942;
    color: #ffffff;
}

桌子

<?php
echo '<table id="viewAll" class="tablesorter">';

            echo '<thead>';
            echo '<tr align="center">';
            echo '<th style="width:70px;">Product</th>';
            echo '<th style="width:105px;">Prob</th>';
            echo '<th style="width:105px;">I</th>';
            echo '<th style="width:60px;">Status</th>';
            echo '<th style="width:120px;">Experience</th>';
            echo '<th style="width:200px;">Technical Summary</th>';
            echo '<th style="width:80px;">Record Created</th>';
            echo '<th style="width:80px;">Record Updated</th>';
            echo '<th style="width:50px;">Open</th>';

            echo '</tr>';
            echo '</thead>';
            echo '<tbody>';

            while ($data=mysqli_fetch_array($result)){

            #limiting the summary text displayed in the table
            $limited_summary = (strlen($data['summary']) > 300) ? substr(($data['summary']),0,300) . '...' : $data['summary'];
            $limited_exp = (strlen($data['exp']) > 300) ? substr(($data['exp']),0,300) . '...' : $data['exp'];

            echo '<tr align="center">

            <td style="width:70px; text-align:center;">'.$data['product'].'</td>';

            //if value is '-' do not display as link
            if ($data['prob'] != '-'){

            echo '<td style="width:105px;">'.$data['prob'].'</a></td>';   
            }
            else{
                    echo '<td style="width:105px; ">'.$data['prob'].'</td>';
            }

            if ($data['i'] != '-'){

              echo '<td style="width:105px; ">'.$data['i'].'</a></td>';
            }
            else{
                    echo '<td style="width:105px; ">'.$data['i'].'</td>';   
            }

            echo'<td style="width:40px; " >'.$data['status'].'</td>
            <td style="width:120px; text-align:left;">'.$limited_cust_exp.'</td>
            <td style="width:200px; text-align:left;">'.$limited_summary.'</td>
            <td style="width:80px; ">'.$data['created'].'</td>
            <td style="width:80px; ">'.$data['updated'].'</td>';


             if (isset($_SESSION['username'])){
             echo '<td style="width:50px; "> <form action="displayRecord.php" method="get">'.'
                <input type="hidden" name="id" value="'. $data['id'].'" style="text-decoration: none" /><input type="submit" value="Open" /></form></td>';
             }else{

                echo '<td style="width:50px; "> <form action="displayRecord.php" method="get">'.'
                <input type="hidden" name="id" value="'. $data['id'].'" style="text-decoration: none" /><input type="submit" value="View" /></form></td>';

             }


            echo '</tr>';

                }#end of while

echo '</tbody>';
echo '</table>';            

?>

编辑 1：我刚刚通过 xampp 尝试了完全相同的代码，它以 IE 为中心。知道为什么它会在我的本地机器上通过 XAMPP 而不是通过服务器工作吗？（现在对此感到很困惑）

编辑 2： jsfiddle

4

3 回答 3

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在顶部添加这行代码，它将起作用。

于 2012-12-19T05:24:35.673 回答
0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

添加这个，它可能会起作用

于 2012-12-19T05:34:10.327 回答
-1

内联 CSS 会覆盖内部或外部 CSS。您已经习惯<th style="width:x">了设置列的宽度。安装使用<th width="x">。

这应该有效。

于 2012-12-19T08:00:49.240 回答