1

我想要一个像下面这样的表格，只有outline_border(?) 和column border在表格中，但是当我尝试时，我的行中有一个深色渐变边框：

在此处输入图像描述

How I achieve so far:

在此处输入图像描述

如何获得带有轮廓边框和列边框但不是连续的表格。我使用了引导 CSS。

如果我使用表格类table-borderless，行行和所有行都消失了outline-border，但我希望列边框在表格中

我尝试这样的问题

请在下面播放：

table {
    border:1px solid black;
    border-collapse: collapse;
}
table tr {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

table td {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>

<table class="table table-small">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Col1</th>
      <th>Col2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>name</td>
      <td>123</td>
      <td>456</td>
    </tr>
    <tr>
      <td>2</td>
      <td>name2</td>
      <td>xyz</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>1</td>
      <td>name</td>
      <td>123</td>
      <td>456</td>
    </tr>
    <tr>
      <td>2</td>
      <td>name2</td>
      <td>xyz</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>1</td>
      <td>name</td>
      <td>123</td>
      <td>456</td>
    </tr>
    <tr>
      <td>2</td>
      <td>name2</td>
      <td>xyz</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>1</td>
      <td>name</td>
      <td>123</td>
      <td>456</td>
    </tr>
    <tr>
      <td>2</td>
      <td>name2</td>
      <td>xyz</td>
      <td>abc</td>
    </tr>
  </tbody>
</table>

4

3 回答 3

3

问题是引导程序会覆盖您的部分定义。为避免这种情况，您可以制作某些 CSS !important。

编辑：删除表格单元格之间的水平线。

.table {
  border: 1px solid black;
}

.table thead th {
  border-top: 1px solid #000!important;
  border-bottom: 1px solid #000!important;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

.table td {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-top: none!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

<table class="table table-small">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Col1</th>
      <th>Col2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>name</td>
      <td>123</td>
      <td>456</td>
    </tr>
    <tr>
      <td>2</td>
      <td>name2</td>
      <td>xyz</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>1</td>
      <td>name</td>
      <td>123</td>
      <td>456</td>
    </tr>
    <tr>
      <td>2</td>
      <td>name2</td>
      <td>xyz</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>1</td>
      <td>name</td>
      <td>123</td>
      <td>456</td>
    </tr>
    <tr>
      <td>2</td>
      <td>name2</td>
      <td>xyz</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>1</td>
      <td>name</td>
      <td>123</td>
      <td>456</td>
    </tr>
    <tr>
      <td>2</td>
      <td>name2</td>
      <td>xyz</td>
      <td>abc</td>
    </tr>
  </tbody>
</table>

于 2018-09-01T06:35:15.283 回答
0

只有在我们的 head 标签中添加这些样式才能做到这一点

.invoice-table {
        border: 1px solid black;
    }

    .invoice-table thead th {
        border: 1px solid #000!important;

    }

    .invoice-table td {
        border: 1px solid #000;

    }

导入：为每个 tr 设置一行，我们可以简单地添加到

<tr style="border-top: 1px solid #000!important">
于 2020-12-31T05:38:40.920 回答
0

我对上述评论的问题是，我可以在下面实现我想要的，但我必须在任何地方使用内联 CSS。有没有更好的方法可以使用，而不仅仅是内联 CSS

.table {
  border: 1px solid black;
}

.table thead th {
  border-top: 1px solid #000!important;
  border-bottom: 1px solid #000!important;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

.table td {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-top: none!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

<table class="table table-small">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Col1</th>
      <th>Col2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>name</td>
      <td>123</td>
      <td>456</td>
    </tr>
    <tr>
      <td>2</td>
      <td>name2</td>
      <td>xyz</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>1</td>
      <td>sub-total</td>
      <td style="border-bottom: 1px solid #000;border-top: 1px solid #000!important;">123</td>
      <td style="border-bottom: 1px solid #000;border-top: 1px solid #000!important">456</td>
    </tr>
    <tr>
      <td>2</td>
      <td>name2</td>
      <td>xyz</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>1</td>
      <td>name</td>
      <td>123</td>
      <td>456</td>
    </tr>
    <tr>
      <td>2</td>
      <td>name2</td>
      <td>xyz</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>1</td>
      <td>name</td>
      <td>123</td>
      <td>456</td>
    </tr>
    <tr style="border-top: 1px solid #000!important">
      <td>##</td>
      <td>Total</td>
      <td>xyz</td>
      <td>abc</td>
    </tr>
  </tbody>
</table>

于 2018-09-04T04:41:24.957 回答