Tables

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px

Default Table Table Style 1 Table Style 2 Table Style 3 Non table table

The default table that can be created via the WYSIWYG has. no overflow in either direction but can be edited via it's source for additional styling.

Rating	Action	Date	Type
AA-	Review - No Action	04-Oct-2021	LTR
F1+	Review - No Action	04-Oct-2021	STR
AA-(dcr)	Review - No Action	04-Oct-2021	Derivative Counterparty Rating
NF	Review - No Action	04-Oct-2021	Support Rating Floor
aa-	Review - No Action	04-Oct-2021	Viability Rating
5	Review - No Action	04-Oct-2021	Support Rating
WD	Withdrawn	25-Jan-2012	Individual Rating

Table Style 1 has the same look and feel as the default table styling, only it has a fixed max width / height that can be adjusted as needed and overflow.

Rating	Action	Date	Type
AA-	Review - No Action	04-Oct-2021	LTR
F1+	Review - No Action	04-Oct-2021	STR
AA-(dcr)	Review - No Action	04-Oct-2021	Derivative Counterparty Rating
NF	Review - No Action	04-Oct-2021	Support Rating Floor
aa-	Review - No Action	04-Oct-2021	Viability Rating
5	Review - No Action	04-Oct-2021	Support Rating
WD	Withdrawn	25-Jan-2012	Individual Rating

Table Style 2 was designed for Fitch Ratings, ratings history and overflows on the X axis.

Date:

04-Oct-2021

23-Apr-2021

09-Jun-2020

22-Apr-2020

12-Jun-2019

21-Jun-2018

28-Sep-2017

13-Dec-2016

14-Jun-2016

08-Dec-2015

19-May-2015

25-Nov-2014

26-Mar-2014

11-Oct-2013

16-May-2013

10-Oct-2012

11-May-2012

18-Aug-2011

24-Aug-2010

26-Sep-2008

08-May-2008

17-Mar-2008

16-Feb-2007

16-Jun-2006

10-Apr-2006

23-Feb-2006

17-Mar-2005

01-Jul-2004

14-Jan-2004

26-Jun-2003

02-Jan-2003

17-Sep-2002

17-May-2002

21-Feb-2002

12-Oct-2001

03-Jan-2001

13-Sep-2000

16-Jul-1997

29-Mar-1996

02-Jun-1995

01-May-1995

10-Jun-1993

07-Jan-1993

26-Jul-1990

Rating:

AA-

A+

AA-

A+

AA-

A+

A-

Action:

Review - No Action

Affirmed

Review - No Action

Affirmed

Upgrade

Affirmed

Downgrade

Affirmed

Upgrade

Affirmed

Revision IDR

Affirmed

Rating Watch On

Affirmed

Downgrade

Affirmed

Upgrade

Affirmed

Upgrade

Affirmed

Upgrade

Affirmed

New Rating

Table Style 3 was designed for Fitch Ratings, disclosures and doesn't overflow and has no fixed dimensions. it's very clear for small amounts of data.

Original Rating Date
Individual Rating	01-Jun-1988
Derivative Counterparty Rating	13-Dec-2016
Long Term Issuer Default Rating	26-Jul-1990
Support Rating Floor	16-Mar-2007
Short Term Issuer Default Rating	01-Jun-1988
Viability Rating	20-Jul-2011
Support Rating	29-Mar-1996

Non table style tables are created using grid layouts.

Sector

Bank Analysis
Capital Markets and Investments
Corporate Credit Analysis
Risk Management
Corporate Finance
ESG

Time Zone

London (BST)/(GMT)
New York (EST)
Singapore (SGT)

Title

Date

Time Zone

Price (USD)

Masterclass: Assessing Bank Asset Quality
Under IFRS 9
3 hours

Tues 14 Jun, 2022

Mon 05 Sept, 2022

Thurs 10 Nov, 2022

London (BST)

New York (EST)

London (BST)

Singapore (SGT)

London (GMT)

New York (EST)

$495

Masterclass: Bank Resolution – TLAC, MREL
and the Capital Stack
3 hours

Fri 17 Jun, 2022

Thurs 08 Sept, 2022

Mon 07 Nov, 2022

London (BST)

New York (EST)

London (BST)

Singapore (SGT)

London (GMT)

New York (EST)

$495

Masterclass: ESG and Credit for Banks
3 hours

Mon 11 Jul, 2022

Mon 26 Sept, 2022

Thurs 24 Nov, 2022

London (BST)

Singapore (SGT)

London (BST)

New York (EST)

London (GMT)

Singapore (SGT)

$495

Masterclass: ESG Regulations and Reporting Frameworks
3 hours

Thurs 07 Jul, 2022

London (BST)

Singapore (SGT)

London (BST)

$495

Masterclass: ESG Sustainable Finance Instruments
3 hours

Tues 12 Jul, 2022

London (BST)

Singapore (SGT)

London (BST)

$495

Masterclass: Operational Resilience and Risk Management
3 hours

Tues 05 Jul, 2022

Thurs 22 Sept, 2022

Mon 21 Nov, 2022

London (BST)

New York (EST)

London (BST)

Singapore (SGT)

London (GMT)

New York (EST)

$495

Masterclass: Project and Infrastructure Financings
3 hours

Tues 21 Jun, 2022

Mon 12 Sept, 2022

Thurs 17 Nov, 2022

London (BST)

New York (EST)

London (BST)

Singapore (SGT)

London (GMT)

New York (EST)

$495

Masterclass: Sector Analysis and Viability
3 hours

Mon 13 Jun, 2022

Thurs 15 Sept, 2022

Mon 14 Nov, 2022

London (BST)

Singapore (SGT)

London (BST)

New York (EST)

London (GMT)

Singapore (SGT)

$495

Masterclass: SME Corporate Credit Analysis
3 hours

Fri 10 Jun, 2022

Mon 12 Sept, 2022

Mon 21 Nov, 2022

London (BST)

Singapore (SGT)

London (BST)

New York (EST)

London (GMT)

Singapore (SGT)

$495

Masterclass: Understanding Credit Ratings
3 hours

Fri 24 Jun, 2022

Thurs 22 Sept, 2022

Mon 28 Nov, 2022

London (BST)

Singapore (SGT)

London (BST)

New York (EST)

London (BST)

Singapore (SGT)

$495

Code

HTML CSS SCSS

<table>
  <colgroup>
    <col width="208px">
    <col width="112px">
    <col width="124px">
    <col width="284px">
  </colgroup>
  <thead>
    <tr>
      <th>Rating</th>
      <th>Action</th>
      <th>Date</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AA-</td>
      <td>Review - No Action</td>
      <td>04-Oct-2021</td>
      <td>LTR</td>
    </tr>
    <tr>
      <td>F1+</td>
      <td>Review - No Action</td>
      <td>04-Oct-2021</td>
      <td>STR</td>
    </tr>
    <tr>
      <td>AA-(dcr)</td>
      <td>Review - No Action</td>
      <td>04-Oct-2021</td>
      <td>Derivative Counterparty Rating</td>
    </tr>
    <tr>
      <td>NF</td>
      <td>Review - No Action</td>
      <td>04-Oct-2021</td>
      <td>Support Rating Floor</td>
    </tr>
    <tr>
      <td>aa-</td>
      <td>Review - No Action</td>
      <td>04-Oct-2021</td>
      <td>Viability Rating</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Review - No Action</td>
      <td>04-Oct-2021</td>
      <td>Support Rating</td>
    </tr>
    <tr>
      <td>WD</td>
      <td>Withdrawn</td>
      <td>25-Jan-2012</td>
      <td>Individual Rating</td>
    </tr>
  </tbody>
</table>

table:not(.table__wrapper) {
  width: 100%;
  font-size: var(--font-size-2);
}

table:not(.table__wrapper) th {
  font-weight: var(--bold);
  text-transform: uppercase;
  border-bottom: 0.1rem solid var(--table-heading-border);
}

table:not(.table__wrapper) tfoot tr {
  border-bottom: none;
}

table:not(.table__wrapper) tfoot tr:hover td, table:not(.table__wrapper) tfoot tr:focus td {
  background: none;
}

table:not(.table__wrapper) tr:hover td, table:not(.table__wrapper) tr:focus td {
  background: var(--table-hover-background);
}

table:not(.table__wrapper) th,
table:not(.table__wrapper) td {
  padding: var(--spacing-1);
  text-align: left;
  vertical-align: top;
}

table:not(.table__wrapper) td {
  border-bottom: 0.1rem solid var(--border-color);
}

.table {
  width: 100%;
  font-size: var(--font-size-2);
}

.table__overflow, .paragraph-dvpack,
.bmi-table-correction,
.field--name-field-dv-pack-table {
  position: relative;
  width: 100%;
  max-height: 48rem;
  overflow: auto;
}

.table__overflow--1 {
  position: relative;
  width: 100%;
  overflow-x: scroll;
}

.table__overflow--2 {
  position: relative;
  overflow-y: scroll;
}

.table--header-sticky {
  position: sticky;
  top: 0;
  left: 0;
  background: var(--background-color);
}

.table--1 tr:hover td, .table--1 tr:focus td {
  background: var(--table-hover-background);
}

.table--1 th,
.table--1 td {
  padding: var(--spacing-1);
  text-align: left;
  vertical-align: top;
}

.table--1 td {
  border-bottom: 0.1rem solid var(--border-color);
}

.table--2 td {
  padding-right: 4.8rem;
  white-space: nowrap;
}

.table--3 th,
.table--3 td {
  text-align: left;
  vertical-align: top;
}

.table--3 th {
  padding: var(--spacing-1) 0;
}

.table--3 td:nth-of-type(2) {
  text-align: right;
}

.table--3 tr:first-of-type td {
  padding-top: var(--spacing-1);
}

.table--3 tr:last-of-type td {
  padding-bottom: var(--spacing-1);
}

.table--4 td {
  padding-right: 2.4rem;
  white-space: nowrap;
}

.table--4 td:last-of-type {
  padding: 0;
  text-align: right;
}

.table--4 td p {
  margin-bottom: 1.2rem;
}

.table__wrapper {
  width: 40.5rem;
}

.table__wrapper .column {
  margin-bottom: 0;
}

.table__wrapper th {
  font-weight: var(--bold);
  text-transform: uppercase;
  border-bottom: 0.1rem solid var(--table-heading-border);
}

.table__wrapper tfoot tr {
  border-bottom: none;
}

.table__wrapper tfoot tr:hover td, .table__wrapper tfoot tr:focus td {
  background: none;
}

.paragraph-dvpack,
.bmi-table-correction,
.field--name-field-dv-pack-table {
  margin-bottom: 2.4rem;
}

table:not(.table__wrapper) {
    width: 100%;
    font-size: var(--font-size-2);

    th {
      font-weight: var(--bold);
      text-transform: uppercase;
      border-bottom: 0.1rem solid var(--table-heading-border);
    }

    tfoot {
      tr {
        border-bottom: none;

        &:hover,
        &:focus {
          td {
            background: none;
          }
        }
      }
    }

    tr {
      &:hover,
      &:focus {
        td {
          background: var(--table-hover-background);
        }
      }
    }

    th,
    td {
      padding: var(--spacing-1);
      text-align: left;
      vertical-align: top;
    }

    td {
      border-bottom: 0.1rem solid var(--border-color);
    }
}
.table {
  width: 100%;
  font-size: var(--font-size-2);

  &__overflow {
    position: relative;
    width: 100%;
    max-height: 48rem;
    overflow: auto;
  }
  &__overflow--1 {
    position: relative;
    width: 100%;
    overflow-x: scroll;
  }
  &__overflow--2 {
    position: relative;
    overflow-y: scroll;
  }

  &--header-sticky {
    position: sticky;
    top: 0;
    left: 0;
    background: var(--background-color);
  }

  &--1 {
    tr {
      &:hover,
      &:focus {
        td {
          background: var(--table-hover-background);
        }
      }
    }

    th,
    td {
      padding: var(--spacing-1);
      text-align: left;
      vertical-align: top;
    }

    td {
      border-bottom: 0.1rem solid var(--border-color);
    }
  }

  &--2 {
    td {
      padding-right: 4.8rem;
      white-space: nowrap;
    }
  }

  &--3 {
    th,
    td {
      text-align: left;
      vertical-align: top;
    }

    th {
      padding: var(--spacing-1) 0;
    }
    td:nth-of-type(2) {
      text-align: right;
    }

    tr {
      &:first-of-type {
        td {
          padding-top: var(--spacing-1);
        }
      }
      &:last-of-type {
        td {
          padding-bottom: var(--spacing-1);
        }
      }
    }
  }

  &--4 {
    td {
      padding-right: 2.4rem;
      white-space: nowrap;

      &:last-of-type {
        padding: 0;
        text-align: right;
      }

      p {
        margin-bottom: 1.2rem;
      }
    }
  }

  &__wrapper {
    width: 40.5rem;

    .column {
      margin-bottom: 0;
    }

    th {
      font-weight: var(--bold);
      text-transform: uppercase;
      border-bottom: 0.1rem solid var(--table-heading-border);
    }

    tfoot {
      tr {
        border-bottom: none;

        &:hover,
        &:focus {
          td {
            background: none;
          }
        }
      }
    }
  }
}

.paragraph-dvpack,
.bmi-table-correction,
.field--name-field-dv-pack-table {
  margin-bottom: 2.4rem; 
  
  @extend .table__overflow;
}

Design Files

Figma

Component Options

Component

Table