Hide html table row with help of CSS

Light topic of some tricky moments with table.

just a sample of html table on css

Browser table can be created with help of tag Table or based on div layers:

<style>
.table {
   display: table;
   width: 100%;
}
.tableRow {
   display: table-row;
}
.tableHead {
  font-weight: bold;
  font-style: italic;
}
.tableCell, .tableHead {
   display: table-cell;
   padding: 3px 3px 3px 3px;
   border: 1px solid grey;
}
</style>
<div class="table">
<div class="tableRow">
<div class="tableHead">Name</div>
<div class="tableHead">Email</div>
</div>
<div class="tableRow">
<div class="tableCell">name1</div>
<div class="tableCell">email@email.live</div>
</div>
<div class="tableRow">
<div class="tableCell">name2</div>
<div class="tableCell">test@test.com</div>
</div>
</div>

Sometimes it could be simplier to use old Table HTML tag, it provides more raw, pure, straightforward behavior.

Table header based on <thead> tag, sometimes it is useful to define it or hide it, depends on situation. Such header is also helpful in situation when necessary to define width of every column.

If you agree to see empty line of hidden items in the UI — use visibility: hidden, otherwise use display: none to removes it completely.

opacity: 0 provides similar hiding effect, but you can not click on elements behind it. Otherwise, visibility: hidden allows to make element clickable.

display: none is good for regular divs.

display: none is not friendly for HTML tables, display tag could deformities table columns incorrectly. Use visibility tag to hide the row. Because table could be complicated and organized with colspan and rowspan.

We can use not only thead and show/hide rows in tbody . So I would add visibility: collapse to TR row to hide the extra space:

.tableDefaultRow {
  visibility: collapse;
}

Also, there are could be additional border appear when we hide the row. Therefore lets apply this rule * to avoid any visible spaces.

.tableDefaultRow {
  visibility: collapse;
  line-height: 0;
}
tr.tableDefaultRow * {
  padding: 0;
  border: none;
}

It is a particular situation depends on browser you use. In case of using Chrome browser you will see the addition bottom border appear — table row is hidden, nevertheless border add additional thickness. Therefore rule * helps us to avoid that behavior.

So it will be different tricks depends on browser. May be better don’t use visibility: collapse :)

So, our table could be created dynamically like this in Angular component:

<table>
  <tbody *ngIf="quotes && quotes.length; else noQuotes">
    <tr class="tableDefaultRow">
      <td class="quotes-id"></td>
      <td class="quotes-status"></td>
      <td class="quotes-type"></td>
    </tr>
    <ng-container *ngFor="let quote of quotes">
    <tr class="clickable" (click)="search(quote.id)">
      <td class="quotes-id">{{ quote.id }}</td>
      <td class="quotes-status">{{ quote.status }}</td>
      <td class="quotes-type">
        {{ quote.type | type:quote.serviceType }}</td>
    </tr>
    </ng-container>
  </tbody>
</table>

Also, SonarQube check the typescript source code with a lot of rules. It doesn’t like html tables in Angular Typescript. So we add this rule before table.

<!-- //NOSONAR --><table>...</table>

Table rows and cells

Links

visibility

More content at blog.devgenius.io.