Question

我有一些代码可以生成一个表，并且工作得很好。

enter image description here

这是代码：

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

<body>

<table>
<tr class="d0"><th>SCHED DATE<th>AMOUNT
<tr class="d0"><td style="text-align: left;">Aug 1, 2011</a></td><td style="text-align: right;">$100</a></td>
<tr class="d1"><td style="text-align: left;">Jul 27, 2011</a></td><td style="text-align: right;">$100</a></td>
<tr class="d0"><td style="text-align: left;">Jul 20, 2011</a></td><td style="text-align: right;">$100</a></td>

<tr><td>Total:</td><td style="{border-top: grey thin solid; text-align: right;}">$300</td>
</table>

</body>
</html>

然后我添加了一行，以便我可以在validator.w3.org

传递html验证

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

但这打破了我的CSS，正确的格式消失了，我的总线已经消失了

enter image description here

我该如何解决？

Answer 1

您的代码的以下部分看起来很奇怪：

<td style="{border-top: grey thin solid; text-align: right;}">

样式值的{}似乎不是标准的（并且正如您在doctype声明中所指定的那样，您希望浏览器使用井来解释您的代码 - 定义标准......）

您应该删除那些{}，并使用类似的东西 - 它看起来更符合标准：

<td style="border-top: grey thin solid; text-align: right;">

另外，正如 @cthulhu 所述，您正在打开<tr>和<th>标记，但从不关闭它们：

以下每行（及其他）的开头都有一个开头<tr> ：
并且您在第一行有两个打开的<th>标记：

<tr class="d0"><th>SCHED DATE<th>AMOUNT
<tr class="d0"><td style="text-align: left;">Aug 1, 2011</a></td><td style="text-align: right;">$100</a></td>
<tr class="d1"><td style="text-align: left;">Jul 27, 2011</a></td><td style="text-align: right;">$100</a></td>

您应该在需要时添加结束</th>和</tr>标记：

<tr class="d0">
    <th>SCHED DATE</th>
    <th>AMOUNT</th>
</tr>
<tr class="d0">
    <td style="text-align: left;">Aug 1, 2011</a></td>
    <td style="text-align: right;">$100</a></td>
</tr>
<tr class="d1">
    <td style="text-align: left;">Jul 27, 2011</a></td>
    <td style="text-align: right;">$100</a></td>
</tr>

Answer 2

这打破了你的css：{border-top: grey thin solid; text-align: right;}

删除周围的{}，它应该没问了。

Answer 3

将第一行更改为<tr><th>SCHED DATE</th><th>AMOUNT</th></tr>。
删除底行中样式中的{ ... }。

Answer 4

您为包含标题的第一行打破了HTML。它应该是：

<tr><th>SCHED DATE AMOUNT</th></tr>

HTML损坏可能会导致浏览器“跳过”呈现内容并破坏设计。

每当我添加“为什么我的CSS停止工作”

4 个答案: