我正在寻找更好的方式来安排我的边界。 目前我有这样的事情,但我觉得必须有一些更好更快的解决方案。
我的代码:
<style>
td.left{
border-top-style:solid;
border-left-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.right{
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.updown{
border-top-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.left2{
border-left-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.right2{
border-right-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.updown2{
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.finish{
border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-color: black;
border-width: 1px;
}
table {
border-style:none;
padding:1px;
margin:0px;
border-spacing: 0px;
border: 0pxborder: ;
width:850px;
}
</style>
我已经创建了类,每个特定的一面都将针对不同的目的显示。
这是代码的主体部分,我在第一行使用类“left”,在第二行使用类“left2”,这是因为如果我在两行都使用“left”,那么第二行将有较粗的线在第一行和第二行之间。 在此表中,我想在特定列之间创建线条以消失或出现,但很难找到更短的代码来做到这一点。
<table>
<tbody>
<tr>
<td width="149" class="left"> For testing 1</td>
<td width="312" class="updown"><input type="text" /></td>
<td width="172" class="left"> For testing 2</td>
<td width="204" class="right"> <input type="text" /></td>
</tr>
<tr>
<td class="left2">For testing 3</td>
<td class="right2" colspan="3"><input type="text" /></td>
</tr>
<tr>
<td class="left2" colspan="2">For testing 4</td>
<td class="finish" colspan="2"><input type="text" /></td>
</tr>
</tbody>
</table>
最佳答案
这是一个使用 border-collapse: collapse;
HTML:
<table>
<tbody>
<tr>
<td><span>For testing 1</span><input type="text" /></td>
<td><span>For testing 2</span><input type="text" /></td>
</tr>
<tr>
<td colspan="2"><span>For testing 3</span><input type="text" /></td>
</tr>
<tr>
<td><span>For testing 4</span></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
CSS:
td {
border: 1px solid black;
border-collapse: collapse;
}
table {
border: 1px solid black;
border-collapse: collapse;
width: 850px;
}
span {
float: left;
width: 150px;
}
关于html - 在 html 中自定义边框的更有效方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21150723/