Question

如果我使用滚动条查看记录的次数将会更多，我需要为tbody设置滚动。为此，我使用垂直滚动条作为表的tbody。滚动条在这种情况下正常工作列值（tbody）位于第一列之下。怎么解决这个？在这个示例中，我使用了css for tbody

tbody {
    height: calc(100vh - 340px);
    display: block;
    width: 100%;
    overflow-y: auto;
}

Answer 1

从css中删除一行

     ###HTML Code ##########

<div class="cold-md-12 text-center">
            <button>Set Pomodoro</button>
             <input id="pomodoroInput" type="number">
            <button>Set Break</button>
             <input id="breakInput" type="number">
        </div>
        <div class="cold-md-12 text-center"><br>
            <button onClick="pomodoroClock.startPomodoro()">Start Pomodoro</button>

        </div>
        <div id="output">

        </div>
### JS COde

var pomodoroClock = {
    countPomadoro: 0,
    countBreak: 0,
    currentTimerText:'',

    startPomodoro: function(){
        var pomadoroTimeInMinutes = document.getElementById('pomodoroInput').value;
        var breakInMinutes = document.getElementById('breakInput').value;
        if(this.countPomadoro<pomadoroTimeInMinutes){
            var minutesLeftPomadoro = pomadoroTimeInMinutes - this.countPomadoro;
            this.currentTimerText = "Your have " + minutesLeftPomadoro + " Minutes Left.";
            this.countPomadoro++;
            this.displayPomadoro();
            setTimeout(this.startPomodoro, 1000);

        } 
        else {

          if(this.countBreak<breakInMnutes){
            var minutesLeftBreak = this.breakInMinutes - this.countBreak;
            currentTimerText = "Your have " + minutesLeftBreak + " Minutes Left in Break.";
            this.countBreak++;
            this.displayPomadoro();    
            setTimeout(this.startPomodoro, 1000);

        }
            else {
                this.currentTimerText=" Break Time is UP. ";
                this.displayPomadoro();
            }
        }
    },
    displayPomadoro: function(){
        var pomodoroHtmlElement = document.createElement('p');
        var outputDiv = document.getElementById('output');
        pomodoroHtmlElement.textContent=this.currentTimerText;
        outputDiv.appendChild(pomodoroHtmlElement);    
    }
}

Answer 2

在你的css类中添加它。这将有效。

更新js小提琴 https://jsfiddle.net/vinothsm92/pL1wqaj1/12/

Answer 3

检查：

tbody {
    position: absolute;
    width: 100%;
    height: 400px;
    overflow: hidden;
    overflow-y: scroll;
}

并删除

.scrollbar {
    height: 450px;
    overflow-y: auto; // Remove this line
}

垂直滚动条在html表

3 个答案: