Styling

This page provides some styling recommendations.

Styling tables

In order to have good looking tables, it is recommended to specify the columns width, on the basis of the information displayed by the table. The HTML builders provided in KingTable library generate HTML tables with header cells having a class matching the property name of displayed objects. The property names are formatted in kebab-case, so that camelCase properties get replaced into "camel-case". For example:

  <th class="name sortable">...</th>
  <th class="hsl-light sortable">...</th>
  <th class="hsv-saturation sortable">...</th>

#table-id {
  .king-table tr {
    th, td {
      padding: 5px 10px 2px 5px;
      &.hsl-light {
        width: 30px;
      }
      width: 160px;
      &:hsv-saturation {
        width: 80px;
      }
    }
  }
}

Styling gallery views

It is recommended to style the gallery view in such a way that generated elements occupy the same space on the page. For example:

#my-table {
  .king-table-gallery > ul > li {
    width: 100px;
    > span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

Use id property

Use the id option when instantiating the KingTable: the HTML builder will automatically set the same id to the generated HTML element. This allows to easily style the table by its #id.