Question

首先请原谅我可能出现的错误，英语不是我的母语，但我希望能够说清楚......

所以我遇到了这个问题：我需要设置第一列和行固定的表格没有脚本。我已经搜索了很多，在SO上发现了很多建议，这让我修复了第一行和第一行。

为此，我使用了相同的表格，但我已经实施了各种解决方案单独（在两个不同的.sass文件上）。

这是表格的HTML：

<table>
    <thead>
        <tr>
            <th></th>
            <th id="1" class="dayColumn">Lunedì</th>
            <th id="2" class="dayColumn">Martedì</th>
            <th id="3" class="dayColumn">Mercoledì</th>
            <th id="4" class="dayColumn">Giovedì</th>
            <th id="5" class="dayColumn">Venerdì</th>
            <th id="6" class="dayColumn">Sabato</th>
            <th id="7" class="dayColumn">Domenica</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="hourNumber">**0**</td>
            <td class="busy"></td>
            <td class=""></td>
            <td class=""></td>
            <td class=""></td>
            <td class=""></td>
            <td class=""></td>
            <td class="busy"></td>
        </tr>
        //the same thing over and over until 
        <tr>
            <td class="hourNumber">**24**</td>
            <td class=""></td>
            <td class=""></td>
            <td class=""></td>
            <td class=""></td>
            <td class=""></td>
            <td class=""></td>
            <td class=""></td>
        </tr>
        //don't mind the fact that I have 25 hours
    </tbody>
</table>

要冻结第一个ROW，我已经使用了这个SASS，它运行良好：

table
    thead
        tr
            display: block

        .dayColumn
            height: 35px
            min-width: 358px

        .hourNumber
            min-width: 30px

    tbody
        display: block
        overflow: auto
        height: 450px

        td
            min-width: 367px

要冻结第一个使用此SASS的栏目：

table
    tbody
        tr
            text-align: center

            td
                min-width: 300px

        .hourNumber
            min-width: 30px
            position: sticky
            left: 0px
            border: #4d4d4d

        .dayColumn
            min-width: 358px

......也正常工作。

问题是：当我将这两个解决方案结合起来时，第一列的粘性解决方案就会停止工作......任何人都可以帮助我理解为什么会这样做？

注意：如果您不熟悉SASS，请使用此网站将其转换为CSS3：https://www.sassmeister.com/

注意2：我还尝试使用应用于.hourNumber类的固定解决方案和td：nth-child（1），但是我遇到了问题并且使用了ragequitted：P

Answer 1

众所周知，

position: sticky由于技术原因而无法在桌子的某些部分正常工作。不幸的是，你将不得不求助于JS解决方案，或者根本没有。

＆＃34;现在的位置是：粘＆＃34;设置＆＃34;显示：块＆＃34;停止工作在tr＆amp;＆amp; tbody上

1 个答案: