2016-03-05 47 views
-1

我有一個html表格,我在ajax請求上獲取。我正在使用.table-bordered類。有沒有控制單元邊界的選項?HTML中的控制表單元格的邊框

我想畫一條垂直線作爲一組列的邊界。例如{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 

有沒有辦法做到這一點?

+0

的[?從HTML表中刪除2個垂直邊界 - 如何]可能的複製(http://stackoverflow.com/q/28437013/1529630) – Oriol

+0

至少請發佈表格的HTML,最好是任何你嘗試過的CSS。解釋這些嘗試失敗的方式。 –

回答

1

將邊框應用到相關單元的右側。創建一個影響問題,每一個小區的CSS規則,借鑑的元素的右邊邊框:

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

我的工作一半表&您攜手另一半表

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

+0

什麼是「我工作半桌,你工作到另一半桌」是什麼意思? –

1

您可以選擇像下面顯示的示例代碼段設置(如表列)CSS3表格單元格邊框屬性:

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

希望這可能有所幫助。