在表格单元格中的粘滞文本

时间：2017-12-06 15:26:04

标签： css css3

我在包装纸中有这个基本表 假设包装器的宽度为1000px，表格宽度为10000px 该表有100列，顶行是10列，colspan为10。

所有这些都是由angularjs和一些ng-repeat

完成的 
<div class="wrapper">
    <table>
        <tbody>
        <tr> <!-- Just 1 -->
            <td colspan="10"> <!-- Repeat for 10 -->
                <span>Some text</span>
            </td>
        </tr>
        </tbody>
        <tbody>
        <tr> <!-- Repeat for 7 -->
            <td>content X</td> <!-- Repeat for 100-->
        </tr>
        </tbody>
    </table>
</div>

我希望some text的跨度粘在容器的边缘上 left: 0

但它不会

是否可以使td内的内容坚持下去？

1 个答案:

答案 0 :(得分：0)

寻找这样的东西？

.wrapper {position:relative;}

.wrapper tr:first-child td {height:1.2em}

.wrapper tr:first-child span {position:fixed}
<div class="wrapper">
    <table>
        <tbody>
        <tr> <!-- Just 1 -->
            <td colspan="10"> <!-- Repeat for 10 -->
                <span>Some text</span>
            </td>
            <td colspan="10"> <!-- Repeat for 10 -->
                <span>Some text</span>
            </td>
            <td colspan="10"> <!-- Repeat for 10 -->
                <span>Some text</span>
            </td>
            <td colspan="10"> <!-- Repeat for 10 -->
                <span>Some text</span>
            </td>
        </tr>
        </tbody>
        <tbody>
        <tr> <!-- Repeat for 7 -->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
        </tr>
        <tr> <!-- Repeat for 7 -->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
        </tr>
        <tr> <!-- Repeat for 7 -->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
            <td>content X</td> <!-- Repeat for 100-->
        </tr>
        </tbody>
    </table>
</div>

风格非常简单;我必须使用的唯一技巧是给顶部td元素一定的高度，否则它们会崩溃，第二行会出现在与第一行相同的位置。

如果这不是您的意思，请编辑问题并澄清！

相关问题
最新问题