Odyssey styleguide

<insert-markup>components.table-</insert-markup>
Source
Type Length in clicks
Current Commission Suggested Ad spend Suggested Commission
Action
Action
Total
Total
--/--
n/a
18.18
Total
$4
Weigted Avarage
$21592
Total
$4
Weigted Avarage
--/--
n/a
Direct (No source)
Direct (No source)
Other 3.90 CPS: 4% $6657 CPS: 4%
a
Paid Search
Paid Search
Other 5.31 CPC: $4 $5662 CPC: $4
a
Affiliates
Affiliates
Other 8.97 Fixed Fee: $4 $9173 Fixed Fee: $4
a
Markup
<div class="odyssey-table__wrapper-outer">
	<div class="odyssey-table__wrapper">
		<table class="odyssey_table">
			<thead class="odyssey_table__headers">
				<tr>
					<th class="odyssey-table--columns-left-align odyssey_table__first-col">
						<div class="odyssey_table__first-col-mock">Source</div>
						<div class="odyssey_table__first-col-content">
							<a href="" class="odyssey_table__header-link--sortable">
							Source
								<div class="odyssey_table__header-sort">
									<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--ascending"/>
									<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--descending"/>
								</div>
							<a>
						</div>
					</th>
					<th class="odyssey-table--columns-center-align">Type</th>
					<th class="odyssey-table--columns-right-align">
						<a href="" class="odyssey_table__header-link--sortable odyssey_table__header-link--sortable--active">
							Length in clicks
							<div class="odyssey_table__header-sort">
								<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--ascending odyssey_table__header-sort-icon--active"/>
								<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--descending"/>
							</div>
						</a>
					</th>
					<th class="odyssey-table--columns-right-align odyssey-table--not-sortable">Current Commission</th>
					<th class="odyssey-table--columns-right-align odyssey-table--not-sortable">Suggested Ad spend</th>
					<th class="odyssey-table--columns-right-align odyssey-table--not-sortable">Suggested Commission</th>
					<th class="odyssey-table--columns-right-align odyssey_table__last-col">
						<div class="odyssey_table__last-col-mock">Action</div>
						<div class="odyssey_table__last-col-content">Action</div>
					</th>
				</tr>
			</thead>
			<tbody class="odyssey_table__rows">
				<tr class="odyssey_table__total-row">
					<td class="odyssey-table--columns-left-align odyssey_table__first-col">
						<div class="odyssey_table__first-col-mock">Total</div>
						<div class="odyssey_table__first-col-content">Total</div>
					</td>
					<td class="odyssey-table--columns-center-align">--/--<div class="odyssey_table__total-row__description">n/a</div></td>
					<td class="odyssey-table--columns-right-align">18.18<div class="odyssey_table__total-row__description">Total</div></td>
					<td class="odyssey-table--columns-right-align">$4<div class="odyssey_table__total-row__description">Weigted Avarage</div></td>
					<td class="odyssey-table--columns-right-align">$21592<div class="odyssey_table__total-row__description">Total</div></td>
					<td class="odyssey-table--columns-right-align">$4<div class="odyssey_table__total-row__description">Weigted Avarage</div></td>
					<td class="odyssey-table--columns-center-align">--/--<div class="odyssey_table__total-row__description">n/a</div></td>
				</tr>
				<tr>
					<td class="odyssey-table--columns-left-align odyssey_table__first-col">
						<div class="odyssey_table__first-col-mock">Direct (No source)</div>
						<div class="odyssey_table__first-col-content">Direct (No source)</div>
					</td>
					<td class="odyssey-table--columns-center-align"><span class="odyssey-label">Other<span></td>
					<td class="odyssey-table--columns-right-align">3.90</td>
					<td class="odyssey-table--columns-right-align">CPS: 4%</td>
					<td class="odyssey-table--columns-right-align">$6657</td>
					<td class="odyssey-table--columns-right-align">CPS: 4%</td>
					<td class="odyssey-table--columns-right-align odyssey_table__last-col">
						<div class="odyssey-menu__mock">a</div>
						<div class="odyssey-menu__wrapper">
							<div class="odyssey-menu odyssey-menu--icon-only">
								<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile">
									<div class="odyssey-menu__arrow"></div>
								</label>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="odyssey-table--columns-left-align odyssey_table__first-col">
						<div class="odyssey_table__first-col-mock">Paid Search</div>
						<div class="odyssey_table__first-col-content">Paid Search</div>
					</td>
					<td class="odyssey-table--columns-center-align"><span class="odyssey-label odyssey-label--attention">Other<span></td>
					<td class="odyssey-table--columns-right-align">5.31</td>
					<td class="odyssey-table--columns-right-align">CPC: $4</td>
					<td class="odyssey-table--columns-right-align">$5662</td>
					<td class="odyssey-table--columns-right-align">CPC: $4</td>
					<td class="odyssey-table--columns-right-align  odyssey_table__last-col">
						<div class="odyssey-menu__mock">a</div>
						<div class="odyssey-menu__wrapper">
							<div class="odyssey-menu odyssey-menu--icon-only">
								<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile">
									<div class="odyssey-menu__arrow"></div>
								</label>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="odyssey-table--columns-left-align odyssey_table__first-col">
						<div class="odyssey_table__first-col-mock">Affiliates</div>
						<div class="odyssey_table__first-col-content">Affiliates</div>
					</td>
					<td class="odyssey-table--columns-center-align"><span class="odyssey-label odyssey-label--success">Other<span></td>
					<td class="odyssey-table--columns-right-align">8.97</td>
					<td class="odyssey-table--columns-right-align">Fixed Fee: $4</td>
					<td class="odyssey-table--columns-right-align">$9173</td>
					<td class="odyssey-table--columns-right-align">Fixed Fee: $4</td>
					<td class="odyssey-table--columns-right-align odyssey_table__last-col">
						<div class="odyssey-menu__mock">a</div>
						<div class="odyssey-menu__wrapper">
							<div class="odyssey-menu odyssey-menu--icon-only">
								<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile">
									<div class="odyssey-menu__arrow"></div>
								</label>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
Source: src/components/table.less, line 1