gpt4 book ai didi

javascript - 我的 table 的边框没有完全显示出来

转载 作者:太空宇宙 更新时间:2023-11-03 20:41:24 24 4
gpt4 key购买 nike

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

这是我的代码:

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

最佳答案

你在几个地方有额外的标签

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

关于javascript - 我的 table 的边框没有完全显示出来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25453377/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com