Testing Bootstrap Custom Table

Testing Bootstrap Custom Table

HTML

<div id="content" class="container">
    <h2>JOBS WITH AP</h2>
    <table class="data mobile-table jobs-listing table table-striped">

    <thead>
        <tr>
            <th class="first-header">
                <span>Position</span>
            </th>
            <th>
                Location
            </th>
            <th class="booking">
                <span class="for-accessibility">Application actions</span>
            </th>
        </tr>
    </thead>
    <tbody>
         <tr>
    <td>
        <a href="http://andrewpougher.co.uk/jobs/28825" target="_blank" class="external-link">Unlimited</a>
    </td>
    <td>
        London
    </td>
    <td class="booking-action">
        <a href="http://andrewpougher.co.uk/jobs/28825" target="_blank" class="arrow">Apply Now</a>
    </td>
</tr><tr>
    <td>
        <a href="http://andrewpougher.co.uk/jobs/18319" target="_blank" class="external-link">Business Development Manager</a>
    </td>
    <td>
        London
    </td>
    <td class="booking-action">
        <a href="http://andrewpougher.co.uk/jobs/18319" target="_blank" class="arrow">Apply Now</a>
    </td>
</tr><tr>
    <td>
        <a href="http://andrewpougher.co.uk/jobs/35921" target="_blank" class="external-link">Digital Account Executive</a>
    </td>
    <td>
        
    </td>
    <td class="booking-action">
        <a href="http://andrewpougher.co.uk/jobs/35921" target="_blank" class="arrow">Apply Now</a>
    </td>
</tr><tr>
    <td>
        <a href="http://andrewpougher.co.uk/jobs/39987" target="_blank" class="external-link">Front End Developer</a>
    </td>
    <td>
        London
    </td>
    <td class="booking-action">
        <a href="http://andrewpougher.co.uk/jobs/39987" target="_blank" class="arrow">Apply Now</a>
    </td>
</tr><tr>
    <td>
        <a href="http://andrewpougher.co.uk/jobs/13045" target="_blank" class="external-link">Head of Client Services (Group Account Director)</a>
    </td>
    <td>
        London
    </td>
    <td...

CSS

/*-- 1.6 Tables --*/
table.data {
    width: 100%;
    margin: 1em 0 3em;
    font-size: .925em;
    line-height: 1.6em 
}


table.data th {
    text-align: left;
    padding: 20px;
    border-top: 1px solid #313131 
}

table.data th:first-child {
    border-left: 1px solid #313131 
}

table.data th:last-child, table.data th.last-cell {
    border-right: 1px solid #313131 
}

table.data th > em {
    display: block;
    clear: both;
    line-height: 1;
    margin-top: -4px;
    font-style: normal;
    font-size: .85em 
}

table.data tbody tr.even {
    background: #edf1f2 
}

table.data th {
    border: 1px solid #fff;
    border-bottom: 0;
    background: #313131;
    color: #fff;
    font-size: 1.1em;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box 
}

table.data td {
    border: 1px solid #313131;
    padding: 10px 20px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box 
}

table.data th > a {
    float: right;
    margin-top: 4px 
}

table.data th > span {
    float: left 
}

table.data th.booking {
    width: 70px 
}

table.data.jobs-listing th.first-header {
    width: 200px 
}

table.data.jobs-listing th.second-header {
    width: 50px 
}

table.data td.booking-action {
    padding: 10px;
    text-align: center 
}

table td.p1 {
    background-color: #F3B6B7 
}

table td.p2 {
    background-color: #F6C8A3 
}

table td.p3 {
    background-color: #FFFEC1 
}

table td.p4 {
    background-color: #CBFCCC 
}

table td.p5 {
    background-color: #CCECFE 
}


#content .converted-table dl {
        padding: 6px 0;
        background: #fff;
        margin: 4px 0;
        border-bottom: 2px solid #ddd 
    }

    #content .converted-table dl.screen-hide {
        padding: 0;
        margin: 0 
    }

    #content .converted-table dl dt {
        text-transform: uppercase;
        font-weight: 600;
        font-family: 'Open Sans', arial, helvetica, sans-serif;
       ...