javascript - jQueryを使用してdiv内に3つのdivを均等に配置して、4つの等しいセクションを作成します

Question

4 つのピクセルに完全に等しい「セクション」に分割したいテーブル セルがあります。

これは、1 ピクセル幅 (ライン) の 3 つの div を持つことによって行われ、これらは別の div の上に margin-left を使用して配置されます。

行が占める余分なスペースを考慮する必要があるため、jQuery でこれを行っています。

私はこれで問題なく動作しています..しかし、すべてのセクションがまったく同じ幅ではありません。セルの幅から3pxを削除し、残りを4（4セクション...）に分割することで、3行を考慮しました（私は思う）。セルが大きくなると、セクションサイズの違いも大きくなります。

これはもちろん、行の幅を px ではなく % にすることで、純粋な CSS で行うことができます。しかし、線が 0.5% の場合、うまくレンダリングされません。私は1pxが好きです。

私は単純なものが欠けていると感じていますか？

これがフィドルです。

http://jsfiddle.net/sQAg2/

コード：

<style>
        body {
        padding: 30px;
    }

    .testTable {
        margin: 0 auto;
        border: 1px solid #f9f9f9;
        width: 100%;
    }

    .testTable tr th {
        padding: 10px;
        border: 1px solid #c1c1c1;
        box-sizing: border-box;
    }

    .testTable tr th:first-child {
        width: 30%;
    }

    .testTable tr td {
        background: #f9f9f9;
        border: 1px solid #c1c1c1;
        box-sizing:border-box;

    }

    .line {
        position: relative;
        background: #000;
        width: 1px;
        min-height: 20px;
        float: left;
        z-index: 9999;
    }
</style>

<table id="" cellspacing="0" cellpadding="0" class="testTable">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="position: relative; width: 100%; overflow: hidden;">

                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="block" style="width: 50%; min-height: 20px; background: green; z-index: 1; margin-left: 30%;"></div>
                    <div class="" style="clear: both;"></div>
                </div>

            </td>
            <td>Testing 2</td>
            <td>Testing 3</td>
            <td>Testing 4</td>
            <td>Testing 5</td>
        </tr>
    </tbody>

</table>

<script>

var cellWidth,
    lineMargin;

// Get the width of a cell and remove 3px due to 3 x 1px lines?
cellWidth = $('.testTable tbody tr:first').find('td').width() - 3;

// divide by 4 due to 4 sections
lineMargin = (cellWidth / 4);

$('.line').css('margin-left', lineMargin);

</script>

Answer 1

IE8は必要ないと仮定します。

margin-left: calc(25% - 1px);