Combine table header with another table body in firefox

Question

I have a css problem when using Firefox , and I don't know where exactly.

I have 1 table, which is built of 2 tables, it uses one table Theadand fills the second table tbody, and then it looks like 1 table with Fix Header, everything works fine until FireFox breaks the side.

I see the table strangely in Firefox : Here is what the last element TH(last activated) in FireBug looks like :

In Chrome it looks okay: Here is the last THin Chrome:

Html:

<div class="modal-scrollable-table-wrapper">
                            <table style="border-left:0">
                                <thead class="fixed-header active-rules" data-table="activeRulesTable">
                                    <tr>
                                        <th data-sort="0">Status</th>
                                        <th data-sort="1">Name</th>
                                        <th data-sort="2">Action</th>
                                        <th data-sort="3">Condition</th>
                                        <th data-sort="4">Last activated</th>
                                    </tr>
                                </thead>
                            </table>

                            <div class="modal-scrollable-table-body">
                                <table id="activeRulesTable" class="cell-border">
                                    <thead style="display: none">
                                    </thead>
                                    <tbody>
                    //get the rows from the server and populates using js
                                    </tbody>
                                </table>
                            </div>
                        </div>

CSS

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
table, thead, th, td {
    border: 1px solid #ddd;
    border-collapse: collapse;
}


.modal .modal-scrollable-table-wrapper table {
    table-layout: fixed;
    width: 902px;
}

#activeRulesTable {
    border-top: 0;
}

.modal .modal-scrollable-table-wrapper td {
    text-align: center;
    font-size: 12px;
    background: transparent;
    padding: 8px 5px;
    color: #6b6b6b;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


.modal .modal-scrollable-table-wrapper th {
    background: #f8f8f8;
    /*border: 1px solid #c6c6c6;*/
    /*border-bottom: none;*/
    vertical-align: middle;
    color: #46aaf6;
    font-weight: bold;
    font-size: 13px;
    padding: 8px 5px;
}

.modal .modal-scrollable-table-wrapper tr > :nth-child(1) {
    width: 62px;
}

.modal .modal-scrollable-table-wrapper tr > :nth-child(2) {
    width: 169px;
}

.modal .modal-scrollable-table-wrapper tr > :nth-child(3) {
    width: 205.5px;
}

.modal .modal-scrollable-table-wrapper tr > :nth-child(4) {
    width: 332px;
}

.modal .modal-scrollable-table-wrapper tr > :nth-child(5) {
    width: 78px;
}

.modal#automated-rules-log-modal tr > th,
.modal#automated-rules-log-modal tr > td {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.scroll tr {
    display: flex;
    /*border-width: 0 0 0 0;*/
}

.scroll tbody {
    display: block;
    width: 100%;
    overflow-y: auto;
    height: 300px;
}

#activeRulesTable th {
    border-top-width: 1px;
    border-right-width: 0;
    height: 50px;
    line-height: 30px;
}

    #activeRulesTable th:last-of-type {
        border-right-width: 1px;
        line-height: 18px;
    }

EDIT: : firefox 1 pixel bug border-spacing = 0 border-collapse, .

Answer 1

CSS:

table, thead, th, td {
    border: 1px solid #ddd;
    border-collapse: collapse;
}

td th .

, "" style="border-left:0" -, , TD TH , .

style="border-left:0" :

table {
    border-collapse: collapse;
}
td, th {
    border: 1px solid #ddd;
}

Answer 2

, 0.5px :

.modal .modal-scrollable-table-wrapper tr > :nth-child(3) {
    width: 205.5px; /* change this to 205 or 206 */
}

, - . , , CSS, , /. :

http://cruft.io/static/rounding/ ( , )