Question

此代码无法识别我放置的td witdh值，但我无法区分样式标记中的表格和单元格宽度/高度（因此表格高度仅为25px），这意味着我知道我做错了什么但似乎无法解决它，任何建议将不胜感激，谢谢

<head>
<style type='text/css'>
table, td; 
table
{
width:800px;height:25px;
}
table
{
position: absolute; right: 100px; top: 80px;
}
table
{
 border-collapse:collapse; 
}
td
{
border-spacing:0px;
}

td
{
border-bottom-style:solid;
border-bottom-width:1px;
border-color:black;
}
td
{
background-color:grey;
color:red;
}
td
{
text-align:center;
}

</style>
</head>";

while($info = mysql_fetch_assoc($sql))
{
echo"
<body>
<table>
<tr>
<td width='20'></td>
<td width='400'>First Name:</td>
<td width='340'>{$info['firstname']}</td>
<td width='40'><a href='changefirstname.php'>edit</a></td>
</tr>
<tr>
<td width='20'><td>Last Name:</td>
<td>{$info['lastname']}</td>
<td><a href='changelastname.php'>edit</td>
</tr>
<tr>
<td width='20'></td>
<td>email:</td>
<td>{$info['email']}</td>
<td><a href='changeemail.php'>edit</td>
</tr>
<tr>
<td width='20><td>password:</td>
<td>********</td>
<td><a href='changepassword.php'>edit</td>
</tr>
</table>
</body>";

Answer 1

您在width = '20附近的行中错过了引用：

<td width='20><td>password:</td>

制作

<td width='20'><td>password:</td>

它可以解决您的问题。

Answer 2

您可以尝试将CSS样式放在另一个文件中。

和你的代码

通常我会为我的PHP代码执行此操作

 <table>
<?php
   $no=1;
   while ($data = mysql_fetch_array)
   {
     echo "<tr>";
     echo "<td>".$data[your_table_column]."</td>";
     echo "</tr>";
   }  
   $no++;

 ?>
 </table>

我认为这个问题不准确。

Answer 3

你的风格应该都在一个选择器中，每个元素都是这样的

table
{

    width:800px;height:25px;
    position: absolute; right: 100px; top: 80px;

    border-collapse:collapse; 

}

td
{

    border-spacing:0px;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-color:black;
    background-color:grey;
    color:red;
    text-align:center;

}

td.col1 {width:20px}
td.col2 {width:400px}
td.col3 {width:340px}
td.col4 {width:40px}

在你的html代码中，添加类

<td class='col1'></td>
<td class='col2'>First Name:</td>
<td class='col3'>{$info['firstname']}</td>
<td class='col4'><a href='' /></td>

而且，你的桌子的高度是25px

Answer 4

首先，你应该删除这一行table, td;它没用。

然后，你应该像这样结合你的样式：

table {
     /* Table */
}

tr {
     /* Row */
}

td {
     /* Cell */
}

对于您的主要问题，您需要：

将类应用于具有固定宽度的td

<table>
    <tr>
        <td class="first">First</td>
        <td class="second">Second</td>
        <td class="third">Third</td>
        <td class="fourth">Fourth</td>
    </tr>
</table>

.first { width: 20px; }
.second { width: 400px; }
.third { width: 340px; }
.fourth { width: 40px; }

不要使用类而是使用CSS选择器

td:nth-child(1) { width: 20px; }
td:nth-child(2) { width: 400px; }
td:nth-child(3) { width: 340px; }
td:nth-child(4) { width: 40px; }

在任何情况下，您都不需要HTML标记中的width='...'。

以下是一个简化示例：http://jsfiddle.net/morgi/csqAb/1/

指定表数据宽度

4 个答案: