Tables

Subscribers Table
Responsive Tables
Elements
Add-on Classes
Child Rows
Stats

Subscriber table

sterling@scdp.com	Roger	Sterling	Partner	1/10/14 2:35PM	12/3/13 12:55PM
cooper@scdp.com	Bert	Cooper	Partner	1/10/14 2:35PM	12/18/13 12:21AM
draper@scdp.com	Don	Draper	Partner	1/10/14 2:35PM	12/18/13 12:21AM
pryce@scdp.com	Lane	Pryce	Partner	1/10/14 2:35PM	12/18/13 12:21AM

<div class="subscriber-table full-width !margin-bottom--lv3"> <div class="st fixed-header selfclear relative" style="top: 0px;"> <div class="full-width inner" data-dojo-attach-point="accessibleTableHeaderBody"> <table class="table-header" role="presentation" data-dojo-attach-point="accessibleTableHeader"> <tr class="odd"> <td class="col-head row-head row-select" role="columnheader" style="width: 47px; min-width: 47px;"> <div class="profile-select overflow-visible" id="dijit__Templated_6" widgetid="dijit__Templated_6"> <ul class="hover-list click-to-open"> <li> <a href="javascript:;"></a> <ul> <li> <a href="#" id="bulk-action-selectall" data-dojo-attach-point="selectVisible" title="select all subscribers visible on this page">Select Visible</a> </li> <li> <a href="#" id="select-all-link" data-dojo-attach-point="selectAll" title="select all subscribers in all pages of this list or segment">Select All</a> </li> <li class="hide"> <a href="#" id="deselect-all-link" data-dojo-attach-point="deselectAll">Deselect All</a> </li> </ul> </li> </ul> </div> </td> <td class="col-head row-head sortable" role="columnheader" data-mojo-table-sort="email_link" style="width: 239px; min-width: 239px;">Email Address </td> <td class="col-head sortable" role="columnheader" data-mojo-table-sort="merge1" style="width: 105px; min-width: 105px;">First Name </td> <td class="col-head sortable" role="columnheader" data-mojo-table-sort="merge2" style="width: 104px; min-width: 104px;">Last Name </td> </tr> </table> </div> </div> <div class="st table-body selfclear relative"> <div class="full-width inner" data-dojo-attach-point="accessibleTableBody"> <table class="table-contents" data-dojo-attach-point="accessibleTable"> <tr class="odd"> <td class="row-head profile-select" title="Email address: sterling@scdp.com" style="width: 47px; min-width: 47px;"> <input name="checkbox1" type="checkbox" data-dojo-type="dijit/form/CheckBox" class="av-checkbox"> </td> <td class="row-head" title="View Profile" style="width: 239px; min-width: 239px;"> <div class="profile-view"> <a href="#">sterling@scdp.com</a> </div> </td> <td title="First Name" style="width: 105px; min-width: 105px;">Roger </td> <td title="Last Name" style="width: 104px; min-width: 104px;">Sterling </td> </tr> <tr class="even"> <td class="row-head profile-select" title="Email address: cooper@scdp.com"> <input name="checkbox1" type="checkbox" data-dojo-type="dijit/form/CheckBox" class="av-checkbox"> </td> <td class="row-head" title="View Profile"> <div class="profile-view"> <a href="/dev.php/lists/members/view?id=103183221&use_segment=Y">cooper@scdp.com</a> </div> </td> <td title="First Name">Bert </td> <td title="Last Name">Cooper </td> </tr> </table> </div> </div> </div>

This table helps identify and segment the list subscribers based on the merge fields defined by the list owner. Upto 60 merge fields are allowed per list.

The Email Address column is absolutely-positioned, while the rest of the table scrolls horizontally when the table is larger than the viewport. At widths less than 640px, the Email Address column is no longer fixed, and the entire table scrolls horizontally.

Responsive tables

	Breakpoints
Grids	960px or more	Between 960px and 640px	640px or less
`size1of8`	12.5%	50%	50%
`size1of4`, `size2of8`	25%	100%	100%
`size1of3`	33.33%	100%	100%
`size3of8`	37.5%	100%	100%
`size1of2`, `size2of4`, `size4of8`	50%	50%	100%
`size5of8`	62.5%	100%	100%
`size2of3`	66.67%	100%	100%
`size3of4`, `size6of8`	75%	100%	100%
`size7of8`	87.5%	100%	100%
`size1of1`, `size2of2`, `size3of3`, `size4of4`, `size8of8`	100%	100%	100%
Use `nochange` with `size1of2` and `size1of3` for halves and thirds at all breakpoints.

Tables are declared with the mc-table class.

For screens larger than 1024px, the tables are 100% wide and span the entire available space. For screens 1024px and below, the tables scroll horizontally in case of an overflow.

For tables that shouldn't span the entire page width, declare them with the block helper class in addition to the mc-table class.

Elements inside tables

Type	Notes	Example
Buttons	Buttons are mostly present in the last cell of a row, therefore also have a `float-right`.	view
Badges	Badges need to be `inline-block-i`s when used inside tables.	A badge That's me!
URLs	There are no rules for URLs inside tables.	Clicked: http://www.theuxnewsletter.com/

Add-on classes

Credit card number	Credit card type	Expiration
Card ending in 0000	Amex	11/2011
For tables with less columns which don't require horizontal scrolling until 500px or less, use the `scroll-small` class along with the `mc-table` class.

Billed to	Roger Sterling
Company	Sterling, Cooper, Draper, Pryce.
Phone	1112223456
Email address	sterling@scdp.com
Billing address	New York, NY
Paid with	Visa card ending in 0000

Use nowrap-small for text inside tables to not wrap when viewed on mobile devices (1024px or less screen widths).

Field type	Required?	Visible?	Put this tag in your content:
email	ALWAYS	ALWAYS	\|EMAIL\| or *\|MERGE0\|*
text			\|\| or *\|MERGE1\|*
text			\|\| or *\|MERGE2\|*

Child rows

Hide child rows

	Send date	Sends	Open rate	Click rate	Unsubs	Bounces
Parent A	Jan 12 - Jul 11, 2014	10,000	44.4%	22.2%	36	28
Child A	Jan 12 - Jul 11, 2014	1,000	10%	5%	5	10
Child B	Jan 12 - Jul 11, 2014	1,000	10%	5%	5	10
Parent B	Jan 12 - Jul 11, 2014	10,000	44.4%	22.2%	36	28
Parent C	Jan 12 - Jul 11, 2014	10,000	44.4%	22.2%	36	28

Stats table cell