Ytdyklly

Table th/td absolute positioning: 1px dislocation

when the table is scrolling, the last column is fixed.

The last column of cells use absolute positioning.

1. Firefox / Edge / IE, have a 1px misalignment at the top of the
   last column and adjacent columns.


2. Chrome, and the top of the adjacent columns is completely align.

want to fix this css bug

not found a good solution

/* =form-table-filter: start */

/* =form-table-filter: end */



/* =style-table */

/* ****************** */

/* =table: start */

.table-wrapper {}

.table-wrapper>.table-caption {}

/* absolute positioning: start */

/* ****************** */

[class*="table-column-fixed"] {

    position: relative;

    border: 1px solid #ddd;

    border-width: 0 1px 1px 0;

}

[class*="table-column-fixed"]>.inner {

    overflow: hidden;

    overflow-x: scroll;

}

[class*="table-column-fixed"] table {

    border: none;

}

[class*="table-column-fixed"] table>caption {

    display: none;

}

[class*="table-column-fixed"] [class*="column-fixed"] {

    border-width: 1px 0 0 0;

    position: absolute;

    top: auto;

}

.table-column-fixed-right>.inner {

    margin: 0 100px 0 0;

    border-right: 1px solid #ddd;

}

.table-column-fixed-right .column-fixed-right {

    width: 100px;

    right: 0;

}

/* ****************** */

/* absolute positioning: end */

table {

    min-width: 100%;

    table-layout: fixed;

    border-collapse: collapse;

    border: 1px solid #ddd;

    background: #fff;

}

table>caption,

.table-caption {}

th,

td {

    padding: 6px;

    border: 1px solid #ddd;

    font-weight: normal;

    text-align: center;

}

th[class*="col"],

td[class*="col"] {}

table>thead {}

table>thead>tr>th,

table>thead>tr>td {

    min-width: 50px;

    position: relative;

}

table .col-name {}

/* =table: end */



/* 

<div class="table-wrapper">

    <h2 class="table-caption"></h2>

    <!-- =form-table-filter: start -->

    <!-- =form-table-filter: end -->

    <div class="table-box table-column-fixed-right">

        <div class="inner">

            <table class="table-m">

                <caption></caption>

                <thead>

                    <tr>

                        <th scope="col" class="col-id">

                            <a class="col-name sort active" href="#">

                                <i class="icon icon-sort-asc" aria-label="icon-sort-asc"></i>

                            </a>

                        </th>

                        <th scope="col" class="col-edit column-fixed-right">

                            <span class="col-name"></span>

                        </th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>1000</td>

                        <td class="column-fixed-right">

                            <span class="operate-area">

                                <a class="link" href="#">

                                    <i class="icon icon-add" aria-label="icon-add"></i>

                                </a>

                            </span>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>

*/