Tables

Tables from Datablocks come as raw HTML to make it easy to seamlessly integrate the tables with the rest of the website. This means that they consist of HTML tags, as shown in the example below with tags as <th> and <tr>.

The tables have some general classes that all widgets have such mf-widget, mf-table-wrapper and mf-table. They also have some widget-specific classes, such as stock-symbol and .latest-prize.

Example of table structure:

<div class="mf-widget mf-stock-table mf-lang-en mf-WIDGET-ID mf-table-wrapper">

<table class="mf-table">
  
    <tbody>
    <tr>
        <td class="table-head mf-tbl-col-0">Ticker</td>
        <td class="stock-symbol mf-tbl-col-1">ABC A</td>
    </tr>
    <tr>
        <td class="table-head mf-tbl-col-0">Latest Price</td>
		<td class="latest-price mf-tbl-col-1">9.00</td>
    </tr>

    </tbody>
    
</table>

</div>

---

Example styling

Below is an example of a styled table with the used CSS.

CSS

/* Style for the entire table */
.mf-table {
    width: 60%;
    border-spacing: 0;
    font-family: Arimo, serif;
}

/* Hover in table exept heading */
.mf-table tbody tr:hover {background-color: #001965; color:white; 
opacity: 0.6; font-weight: 600;}

/* Style for title */
.mf-table th {
    background-color: #001965;
    color: white;
    font-size: 22px;
    white-space: nowrap;
    padding: 8px;
    text-align: right;
}

/* Alternating background */
/* .mf-table tr:nth-child(even) {background-color: #f2f2f2;} */

/* Style for columns */
.mf-table td {
    padding: 8px;
    height: 24px;
}

/* padding and alignment on columns except first one */
.mf-table td:not(.mf-table td:first-child) {
    padding-right: 10px;
    text-align: right;
}

/* border under each row */
.mf-table td {
    border-bottom: 4px solid #f2f2f2;
}

/* first row bold, mf-widget is specific for each widget */
#mf-widget-4eed-XXX-XXX-XXX-XXX-f80e3 td:first-child{
    font-weight: bold;
}

CSS for positive and negative numbers

.delta-shares.positive{
    color: darkgreen;
}

.delta-shares.negative{
    color: darkred;
}

.relative-change.positive{
    color: darkgreen;
}

.relative-change.negative{
    color: darkred;
}

---

Responsiveness

The tables are not responsive. Since the data in the tables is presented in columns, it is common to work with an overflow scroll.

Here are some examples of customer solutions: Stillfront and JM.