在HTML中控制表格单元格的边框
[英]Control table cell's borders in HTML
问题描述
I have an html table which I get on ajax request. 
我有一个在ajax请求上得到的html表。 I'm using .table-bordered class. 我正在使用.table-bordered类。 Is there an option to control the cell's borders? 有控制细胞边界的选项吗？
I want to draw a vertical line as border between a certain group of columns. 我想画一条垂直线作为某组列之间的边界。 For example {A, B, C, D} and {E, F, G, H}. 例如{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
Is there any way to do that? 有什么办法吗？
3 个解决方案
解决方案1
1 2016-03-05 21:30:40
You can set CSS3 Table cell border property selectively (per Table columns) like in the sample code snippet shown below: 您可以有选择地（按表列）设置CSS3表格单元格边框属性，如下面的示例代码片段所示：
table td:nth-child(2)
{
border-left: 1px solid #909090;
border-right: 1px solid #909090;
}
Hope this may help. 希望这会有所帮助。
解决方案2
1 已采纳 2016-03-05 21:31:11
Apply borders to the right side of the cells in question. 在相关单元格的右侧应用边框。 Create a CSS rule that affects each cell in question that draws a border on the right of an element: 创建一个CSS规则，该规则会影响所涉及的每个单元格，并在元素的右侧绘制边框：
td:nth-child(2),
td:nth-child(6),
td:nth-child(10) {
border-right:1px solid black;
}
解决方案3
0 2016-03-05 21:27:24
I work half table & you work to another half table 我上半桌，而你又上半桌
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.