<style type="text/css">
        .odd
        {
            background-color: #e5e4e2;
        }
        .padded td
        {
            padding: 5px;
        }
        .bold
        {
            font-weight: bold;
        }
        .headerdiv
        {
            float: left;
            position: relative;
        }
    </style>

        <div class="panel-primary">
            <div id="headerspans" class="panel-heading bold" style="height: 50px" data-bind="visible: MailList().length > 0">
                <div id="headerspan1" class="text-center headerdiv">
                    <span class="small">Отправитель</span></div>
                <div id="headerspan2" class="text-center headerdiv">
                    <span class="small">Дата</span></div>
                <div id="headerspan3" class="text-center headerdiv">
                    <span class="small">Время</span>
                </div>
                <div id="headerspan4" class="text-center headerdiv">
                    <span class="small">Получатель</span></div>
                <div id="headerspan5" class="text-center headerdiv">
                    <span class="small">Размер</span></div>
                <div id="headerspan6" class="text-center headerdiv">
                    <span class="small">Статус</span></div>
            </div>
            <div id="tableDiv" class="panel-body" style="overflow: scroll; height: 480px; width: 99%; position: absolute">
                <table class="table-bordered table-condensed padded" id="gridtable" style="width: 99%">
                    <tbody data-bind="foreach: MailList">
                        <tr class="gridtable" data-bind="css: { 'odd': ($index() % 2 == 0) }">
                            <td>
                            <div id="celllabel1" class="small" style="max-width: 300px; min-width: 80px">
                            <span  data-bind="text: sender"></span>
                            </div>
                            </td>
                            <td>
                            <div id="celllabel2" class="text-center small">
                            <span data-bind="text: sdate"></span>
                            </div>
                            </td>
                            <td>
                            <div id="celllabel3" class="text-center small" style="min-width: 50px">
                            <span data-bind="text: stime"></span>
                            </div>
                            </td>
                            <td>
                            <div id="celllabel4" class="small">
                            <span data-bind="text: recipient"></span>
                            </div>
                            </td>
                            <td>
                            <div id="celllabel5" class="text-right small" style="white-space: nowrap" ">
                            <span data-bind="text: size"></span>
                            </div>
                            </td>
                            <td>
                            <div id="celllabel6" class="small" style="min-width: 50px">
                            <span data-bind="text: status"></span>
                            </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>