Working with tables - On Premises 6.4


The contentstyles.css file includes several default definitions applied to tables:

css definition


div.table-responsive {

margin:10px 10px 10px 0;

Author-it puts this element around all tables by default. A responsive table adjusts its design to accommodate screens of different sizes.

table.table {

border-collapse: separate;

border-spacing: 1px;

border-radius: 4px;

border: 2px solid var(--light-gray-color);

background-color: var(--light-gray-color);

table-layout: fixed;

width: inherit;

box-sizing: border-box;

box-shadow: 1px 1px 3px var(--light-gray-color);

This applies a light-grey border with light-grey shading to the entire table.

table.table td, table.table th {

border: none !important;

background-color: white;

border-spacing: 0px;

padding: 5px !important;

This sets the border for all data and header cells within the table.

table.table th {

background-color: var(--light-gray-color);

This adds a light-grey background shading to the header row of tables when one has been defined. Tables without a header row remain unaffected.

You can make changes to these default definitions, if required, and use any of the following examples for other possible customizations.