Basic Table And Input Table

Default

A basic table for displaying data

Quantity	Price
1	$25.00
5	$20.00
10	$12.00
25+	$5.00

HTML

<div class="t-content" style="width: 250px;">
    <table class="c-basicTable">
        <thead class="c-basicTable-header">
            <th>Quantity</th>
            <th>Price</th>
        </thead>
        <tbody>
            <tr class="c-basicTable-row">
                <td>1</td>
                <td class="c-basicTable-currency">$25.00</td>
            </tr>
            <tr class="c-basicTable-row">
                <td>5</td>
                <td class="c-basicTable-currency">$20.00</td>
            </tr>
            <tr class="c-basicTable-row">
                <td>10</td>
                <td class="c-basicTable-currency">$12.00</td>
            </tr>
            <tr class="c-basicTable-row">
                <td>25+</td>
                <td class="c-basicTable-currency">$5.00</td>
            </tr>
        </tbody>
    </table>
</div>

Tabular Inputs

Table with inputs

	Charge Amount	Start Quantity	End Quantity	Start Date	End Date

HTML

<div class="t-content" style="width: 1000px;" inv-focus-group>
    <form class="c-tableForm">
        <table class="c-basicTable c-basicTable--form">
            <thead class="c-basicTable-header">
            <th><input type="checkbox"></th>
            <th>Charge Amount</th>
            <th>Start Quantity</th>
            <th>End Quantity</th>
            <th>Start Date</th>
            <th>End Date</th>
            </thead>
            <tbody>
            <tr class="c-basicTable-row">
                <td><input type="checkbox"></td>
                <td><input type="text"></td>
                <td><input type="number"></td>
                <td><input type="number"></td>
                <td>
                    <inv-date-time-selector
                        date=""
                        hide-relational-time="true">
                    </inv-date-time-selector>
                </td>
                <td>
                    <inv-date-time-selector
                        date=""
                        hide-relational-time="true">
                    </inv-date-time-selector>
                </td>
            </tr>
            <tr class="c-basicTable-row">
                <td><input type="checkbox"></td>
                <td><input type="text"></td>
                <td><input type="number"></td>
                <td><input type="number"></td>
                <td>
                    <inv-date-time-selector
                        date=""
                        hide-relational-time="true">
                    </inv-date-time-selector>
                </td>
                <td>
                    <inv-date-time-selector
                        date=""
                        hide-relational-time="true">
                    </inv-date-time-selector>
                </td>
            </tr>
            <tr class="c-basicTable-row">
                <td><input type="checkbox"></td>
                <td><input type="text"></td>
                <td><input type="number"></td>
                <td><input type="number"></td>
                <td>
                    <inv-date-time-selector
                        date=""
                        hide-relational-time="true">
                    </inv-date-time-selector>
                </td>
                <td>
                    <inv-date-time-selector
                        date=""
                        hide-relational-time="true">
                    </inv-date-time-selector>
                </td>
            </tr>
            <tr class="c-basicTable-row">
                <td><input type="checkbox"></td>
                <td><input type="text"></td>
                <td><input type="number"></td>
                <td><input type="number"></td>
                <td>
                    <inv-date-time-selector
                        date=""
                        hide-relational-time="true">
                    </inv-date-time-selector>
                </td>
                <td>
                    <inv-date-time-selector
                        date=""
                        hide-relational-time="true">
                    </inv-date-time-selector>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>

Large Table

Table with large text

Quantity	Price
1	$25.00
5	$20.00
10	$12.00
25+	$5.00

HTML

<div class="t-content" style="width: 250px;">
    <table class="c-basicTable c-basicTable--large">
        <thead class="c-basicTable-header">
        <th>Quantity</th>
        <th>Price</th>
        </thead>
        <tbody>
        <tr class="c-basicTable-row">
            <td>1</td>
            <td class="c-basicTable-currency">$25.00</td>
        </tr>
        <tr class="c-basicTable-row">
            <td>5</td>
            <td class="c-basicTable-currency">$20.00</td>
        </tr>
        <tr class="c-basicTable-row">
            <td>10</td>
            <td class="c-basicTable-currency">$12.00</td>
        </tr>
        <tr class="c-basicTable-row">
            <td>25+</td>
            <td class="c-basicTable-currency">$5.00</td>
        </tr>
        </tbody>
    </table>
</div>

Unstriped Table

Table with no striping

Quantity	Price
1	$25.00
5	$20.00
10	$12.00
25+	$5.00

HTML

<div class="t-content" style="width: 250px;">
    <table class="c-basicTable c-basicTable--unstriped">
        <thead class="c-basicTable-header">
        <th>Quantity</th>
        <th>Price</th>
        </thead>
        <tbody>
        <tr class="c-basicTable-row">
            <td>1</td>
            <td class="c-basicTable-currency">$25.00</td>
        </tr>
        <tr class="c-basicTable-row">
            <td>5</td>
            <td class="c-basicTable-currency">$20.00</td>
        </tr>
        <tr class="c-basicTable-row">
            <td>10</td>
            <td class="c-basicTable-currency">$12.00</td>
        </tr>
        <tr class="c-basicTable-row">
            <td>25+</td>
            <td class="c-basicTable-currency">$5.00</td>
        </tr>
        </tbody>
    </table>
</div>