0

我有一个表格单元格，我想将它分成 4 个像素完美相等的“部分”。

这是通过拥有 3 个 1px 宽（线）的 div 来完成的，然后使用 margin-left 将它们定位在另一个 div 的顶部。

我在 jQuery 中执行此操作，因为我们需要考虑行占用的额外空间。

我有这个工作正常..但所有部分的宽度都不完全相同。我已经考虑到（我认为）这 3 行，从单元格的宽度中删除 3px，然后将剩余的分成 4 个（4 个部分......）随着单元格变大，部分大小的差异也随之增加。

这当然可以在纯 CSS 中通过以 % 而不是 px 为单位的线宽来完成。但是将线条设为 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>
4

1 回答 1

1

假设你不需要 IE8。

margin-left: calc(25% - 1px);
于 2013-10-07T21:04:56.557 回答