JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div id="work_list_container">
<table id="work_list" class="table">
    <tbody>
        <tr>
            <th>Submitted</th>
            <th>Job Title</th>
            <th>Status</th>
            <th>Rating</th>
            <th>Earnings</th>
        </tr>
        <tr>
            <td>07/08/12 11:08 AM</td>
            <td>Voicemail Transcription A328413</td>
            <td>IN PROGRESS</td>
            <td>NA</td>
            <td>NA</td>
        </tr>
        <tr class="active">
            <td>06/29/12 06:49 PM</td>
            <td>Voicemail Transcription A328413</td>
            <td>ACCEPTED</td>
            <td>98</td>
            <td>$0.97</td>
        </tr>
        <tr>
            <td>06/27/12 06:48 PM</td>
            <td>Voicemail Transcription A328413</td>
            <td>ACCEPTED</td>
            <td>90</td>
            <td>$1.72</td>
        </tr>
        <tr>
            <td>06/24/12 10:15 AM</td>
            <td>Voicemail Transcription A328413</td>
            <td>ACCEPTED</td>
            <td>100</td>
            <td>$.046</td>
        </tr>
        <tr>
        <td colspan="5" class="table_r_1px">
            <div class="absolute_div">
                <img src="http://jsfiddle.net/img/logo.png" class="absolute_div_img" alt="" >
            </div>
        </td>
        </tr>
        <tr>
            <td>06/21/12 02:32 AM</td>
            <td>Voicemail Transcription A328413</td>
            <td>ACCEPTED</td>
            <td>95</td>
            <td>$2.25</td>
        </tr>
    </tbody>
</table><!--#work_list-->
</div><!--#work_list_container-->
</div><!--.wrapper-->

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
    line-height: 1;
}
.wrapper {
    float: left;
    position: relative;
    margin-left: 10px;
}
#work_list_container {
    background: #F8F8F8;
    color: #666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 606px;
    margin: 0 auto;
}
#work_list {
    width: 100%;
}
#work_list th {
    background: #ccc;
    border-left: 1px solid #fff;
    text-transform: uppercase;
    font-weight: normal;
}

#work_list th:first-child {
    border-left: none;
}

#work_list tr {
    position: relative;
    cursor: pointer;
}
#work_list tr:first-child {
    background: #ccc;
}
#work_list tr:nth-child(even) {
    background: #f0f0f0;
}
#work_list td, #work_list th {
    padding: 10px;
}
#work_list tr td:first-child:before {
    content: '';
    position: absolute;
    width: 606px;
    margin: -10px 0 0 -10px;
    height: 31px;
}
#work_list tr.active td:first-child:before {
    background: #000 url('http://jsfiddle.net/img/logo.png') center no-repeat; /*for old browsers*/
    background: rgba(0,0,0,.7) url('http://jsfiddle.net/img/logo.png') center no-repeat;
    z-index: 100;
}

/* Суть в том, что встраиваем строку в таблицу, выше нужной строки, на всякий случай задаём высоту - 0 или 1px ))
И вкладываем в неё объеденённую ячеёку.
3.) в эту ячейку в кладываем див с абсолютным позиционированием ))
*/
.absolute_div_img{
    position: relative;
    left: 50%;
    margin-left: -80px;
}
.table_r_1px {
    height: 1px; 
    padding: 0px !important;
}
.absolute_div {
    background: red;
    position: absolute;
    margin-bottom: -32px;
    width: 606px;/*можно и 100% поставить, но explorer... */
    z-index: 20; /*Для Оперы*/
}
.absolute_div {
    opacity: 0.8; /*для всех браузеров*/
}
.absolute_div {
   filter: 
      progid:DXImageTransform.Microsoft.Alpha(opacity=80, finishOpacity=80, style=0); /*Прозрачность для explorera*/
}