在 html 中自定义边框的更有效方法

Question

我正在寻找更好的方式来安排我的边界。 目前我有这样的事情，但我觉得必须有一些更好更快的解决方案。

我的代码：

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

Answer 1

你可以这样做：

td { 
    border:1px solid black; 
}

td.left{ 
    border-right-style:none; 
}
td.right{ 
    border-left:none; 
}
td.updown{ 
    border-left:none; 
    border-right:none; 
}
td.left2{ 
    border-top:none; 
    border-right:none; 
}
td.right2{ 
    border-left:none; 
    border-top:none; 
}
td.updown2{ 
    border-top:none; 
    border-left:none; 
    border-right:none; 
}
td.finish{ 
    border-top:none; 
}

见：http://jsfiddle.net/Cuyxh/

但是，我建议为 HTML 中的每个边框使用类，以获得更加模块化的方法。

例子：

b-left, b-right, b-top, b-down { 
    border-color:black;
    border-width:1px;
}
b-left { 
    border-left-style:solid; 
}
b-top { 
    border-top-style:solid; 
}
b-right { 
    border-right-style:solid; 
}
b-bottom { 
    border-bottom-style:solid; 
}

然后将这些类添加到表格单元格中。例如：

<td width="149" class="b-left b-top">For testing 1</td>

Answer 2

这里是border-collapse: collapse;的字符保存解决方案

LIVE DEMO

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