Question

我正在尝试在表结构中创建表单。但是，似乎一旦我将盒子文本放到标签上，外边框就会失去其结构，部分边框会消失。我不确定是什么造成的。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Test model</title>
<style>
    div.box{height:.14in; width:.14in; border: 1px solid black}
    td.box{padding:0;}
    body{font-family:Arial, Helvetica, sans-serif;font-size:10pt;background-color:#FFFFCC;margin-top:2px;margin-left:3px}
    .highlight{background-color:#D8DCE7}
    .p12px{padding-left:12px;vertical-align:top;}
    table.q{width:660px;border:1px solid black;border-top-width:0;padding-left:2px;}
    table.qFirst{width:660px;border:1px solid black;}
    table{border-collapse:collapse}
    table td{padding:1px}

</style>
</head>
<body>
    <table class='qFirst'>
    <tr class='highlight'><td class='p12px'><b>Title of Table</b></td></tr>
    </table>
<table class='q'>
    <tr><td>Label 0</td></tr>
    <tr><td>Label 1</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
    <tr><td>Label 2</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
    <tr><td>Label 3</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
    <tr><td>Label 4</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
    <tr><td>Label 5</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
    <tr><td>Label 6</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
    <tr><td>Label 7</td></tr>
    <tr><td>Label 8</td></tr>
</table>
</body>
</html>

我可以使用Javascript，如果这会有所帮助，但我不能使用JQuery。

Answer 1

您在少数地方有额外的标签

<tr><td>Label 0</td><td></tr>
<tr><td>Label 7</td><td></tr>
<tr><td>Label 8</td><td></tr>

将其更改为此

<tr><td colspan="5">Label 0</td></tr>
<tr><td>Label 1</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
<tr><td>Label 2</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
<tr><td>Label 3</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
<tr><td>Label 4</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
<tr><td>Label 5</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
<tr><td>Label 6</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
<tr><td colspan="5">Label 7</td></tr>
<tr><td colspan="5">Label 8</td></tr>

Answer 2

此处您有一个额外的<td>标记。

<tr><td>Label 0</td><td></tr>

除了每一行，您还需要在结束前添加<td>。

你的样式标签中也缺少一堆分号。看起来应该是这样......

<style>
    div.box{height:.14in; width:.14in; border: 1px solid black;}
    td.box{padding:0;}
    body{font-family:Arial, Helvetica, sans-serif; font-size:10pt;background-color:#FFFFCC; margin-top:2px; margin-left:3px;}
    .highlight{background-color:#D8DCE7;}
    .p12px{padding-left:12px; vertical-align:top;}
    table.q{width:660px; border:1px solid black; border-top-width:0; padding-left:2px;}
    table.qFirst{width:660px; border:1px solid black;}
    table{border-collapse:collapse;}
    table td{padding:1px;}
</style>

编码时应始终遵循惯例。确保每个案例都以相同的方式表示。您正在混合使用不同类型的语法，这会使您的代码难以阅读。

Answer 3

是边界崩溃。删除它将恢复你的外边框

Answer 4

从CSS中删除table{border-collapse:collapse}。

这是小提琴：http://jsfiddle.net/e65zh0ex/

Answer 5

从所有表中删除border-collapse: collapse;规则，并将其仅添加到第一个表头中。

话虽如此，你不需要两张桌子。 thead元素是您应该使用的元素。此元素定义表头，而tbody元素定义主体（doh！）。因此，使用与经典表相同的结构将标题放在thead中，数据将进入tbody。

@see：http://www.w3.org/wiki/HTML/Elements/thead

Answer 6

如果你想让border-collapse添加空单元格以在每行中包含相同数量的单元格，如下所示：

<tr><td>Label 0</td><td></td><td></td><td></td><td></td></tr>
<tr><td>Label 1</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
<tr><td>Label 2</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
<tr><td>Label 3</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
<tr><td>Label 4</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
<tr><td>Label 5</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
<tr><td>Label 6</td><td><div class='box'></div></td><td>Yes</td><td><div class='box'></div></td><td>No</td></tr>
<tr><td>Label 7</td><td></td><td></td><td></td><td></td></tr>
<tr><td>Label 8</td><td></td><td></td><td></td><td></td></tr>

Answer 7

尝试把colspan =＆＃34; 5＆＃34;元素at与td标签不是一整行。

<tr><td colspan="5">Label 0</td></tr>

As seen here

我桌子的边框没有完全显示出来

7 个答案: