在HTML中控制表格单元格的边框

Question

我有一个在ajax请求上得到的html表。 我正在使用.table-bordered类。 有控制细胞边界的选项吗？

我想画一条垂直线作为某组列之间的边界。 例如{A，B，C，D}和{E，F，G，H}。

ID name | A B C D | E F G H | AA BB
1  aaa  | 2 4 6 4 | 4 6 2 7 | a  b
2  bbb  | 2 6 5 2 | 5 6 7 4 | b  a
3  ccc  | 6 7 4 7 | 6 5 4 6 | a  b
4  ddd  | 6 7 9 7 | 5 2 6 7 | b  a

有什么办法吗？

Answer 1

您可以有选择地（按表列）设置CSS3表格单元格边框属性，如下面的示例代码片段所示：

table td:nth-child(2)
{
  border-left: 1px solid #909090;
  border-right: 1px solid #909090;
}

希望这会有所帮助。

Answer 2

在相关单元格的右侧应用边框。 创建一个CSS规则，该规则会影响所涉及的每个单元格，并在元素的右侧绘制边框：

  td:nth-child(2), 
  td:nth-child(6), 
  td:nth-child(10) {
        border-right:1px solid black; 
  }

Answer 3

我上半桌，而你又上半桌

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Table</h2> <p>The .table-bordered class adds border on all sides of the table and cells:</p> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>name</th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>aaa</td> <td>2</td> <td>2</td> <td>6</td> <td>6</td> </tr> <tr> <td>2</td> <td>bbb</td> <td>4</td> <td>6</td> <td>7</td> <td>7</td> </tr> <tr> <td>3</td> <td>ccc</td> <td>6</td> <td>5</td> <td>4</td> <td>9</td> </tr> <tr> <td>4</td> <td>ddd</td> <td>4</td> <td>2</td> <td>7</td> <td>7</td> </tr> </tbody> </table> </div> </body> </html>