CODEWITHSUNDEEP
htmlcsshtml-tableborder
Kira
Kira

Reputation: 83

Table tr border width 100%

I want to make my border-top full table width but it's only taking my table data (td) size...

The last tr have my border-top but it's not taking the full size of the table.

        th {
      border: 0 solid #581D74;
      border-bottom-width: 1px;
      padding: 15px;
    }

    tr, td, th {
      text-align: left;
      padding: 15px;
    }


    .add-btn {
      min-width: 0;
      color: white;
    }

    .add-icon {
      color: #581d74;
    }

    .total-row {
      border: 0 solid #581d74;
      border-top-width: 1px;
      padding: 15px;
      border-collapse: collapse;
    }
<table class="disinves-table">
        <tr class="table-header">
          <th></th>
          <th>head 1</th>
          <th>head 2</th>
          <th>head3</th>
        </tr>

        <tr>
          <td><button mat-button class="add-btn"><mat-icon class="add-icon">add_circle</mat-icon></button></td>
          <td>first data</td>
          <td>19%</td>
        </tr>

        <tr class="total-row">
          <td>Total</td>
          <td></td>
          <td>8654</td>
        </tr>
      </table>

Upvotes: 1

Views: 2387

Answers (1)

Mr Lister
Mr Lister

Reputation: 46569

If you are complaining about the gaps you see in the border, that is because the default style of a table is to have a few pixels of space between the cells.
Solution: set the table's border-spacing to 0.

.disinves-table {
  border-spacing: 0;
}

th {
  border: 0 solid #581D74;
  border-bottom-width: 1px;
  padding: 15px;
}

tr, td, th {
  text-align: left;
  padding: 15px;
}

.add-btn {
  min-width: 0;
  color: white;
}

.add-icon {
  color: #581d74;
}

.total-row {
  border: 0 solid #581d74;
  border-top-width: 1px;
  padding: 15px;
  border-collapse: collapse;
}
<table class="disinves-table">
  <tr class="table-header">
    <th></th>
    <th>head 1</th>
    <th>head 2</th>
    <th>head3</th>
  </tr>

  <tr>
    <td><button mat-button class="add-btn"><mat-icon class="add-icon">add_circle</mat-icon></button></td>
    <td>first data</td>
    <td>19%</td>
  </tr>

  <tr class="total-row">
    <td>Total</td>
    <td></td>
    <td>8654</td>
  </tr>
</table>

Upvotes: 1

Related Questions