Question

我有一个html表，我得到了ajax请求。我正在使用.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

我工作半桌＆amp;你工作到另一个半桌

＆＃13;

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

＆＃13;

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

3 个答案: