CODEWITHSUNDEEP
htmlcsshtml-table
Vpa
Vpa

Reputation: 737

Table outline border and column border only in Bootstrap

I want a table like below, only the outline_border (?) and column border to be in the table, but when I try there is a dark fade border in my rows:

enter image description here

How I achieve so far:

enter image description here

How can I get a table with outline border and column border, but not in a row. I used bootstrap CSS.

If i used table class table-borderless the rows line and all lines were gone except the outline-border, but I want column border to be in the table

I try like this questions

Please play it below here:

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>

Upvotes: 1

Views: 17698

Answers (3)

Muhammad Tariq
Muhammad Tariq

Reputation: 175

Only this can done by adding these styles in our head tag

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

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

    }

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

    }

Import: to have line for each tr we can simple add to

<tr style="border-top: 1px solid #000!important">

Upvotes: 0

Vpa
Vpa

Reputation: 737

My question for the above comment is, I can achieve what I want like below, but I have to use inline CSS everywhere. Is there any better approach to work with, not just inline 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>

Upvotes: 0

Gerard
Gerard

Reputation: 15786

The problem is that bootstrap overwrites part of your definitions. To avoid this, you can make certain CSS !important.

EDIT: Horizontal lines between table cells removed.

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

Upvotes: 3

Related Questions