CSS for Magellan tables

CSS definition

Explanation

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-gray border with light-gray 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-gray background shading to the header row of tables when one has been defined. Tables without a header row remain unaffected.