Question

我想将固定行显示为可分析表中的最后一行。该行可以在表外但固定在表中，当用户scoll表时它不应滚动。我尝试使用下面的css代码，但无法解决问题。以红色突出显示的行我希望将其固定，当用户滚动它时，请滚动并且应该看到它。

css代码：

 #foo {
      position: absolute;
      bottom: 0;
      background: red;
    }

Answer 1

我会在这个例子中使用Javascript。

此修复更像是通知，我是谷歌css通知技巧或通知javascript技巧。

我选择一个简单的2或3秒定时器，带有淡入淡出和放大器。 out＆amp;删除选项。

- 或 -

使用Javascript更改刚刚修复的Item的className。 ClassName是HTML类，它是CSS，所以你可以做红色或其他什么。您甚至可以使用setTimeout函数使颜色变红也消失。

实施例

＆＃13;

var SET_TIMEOUT = {};
var countdown = 1;

function update_fix(_THIS_){
  _THIS_.parentNode.style.background='rgba(230, 25, 25, '+countdown+')';
  SET_TIMEOUT['color_fade()'] = setTimeout(function(){color_fade(_THIS_);}, 2000);
}

function color_fade(_THIS_){
  countdown = countdown - .01;
  _THIS_.parentNode.style.background='rgba(230, 25, 25, '+countdown+')';
  if(countdown!=0){
  SET_TIMEOUT['color_fade()'] = setTimeout(function(){color_fade(_THIS_);}, 20);
}}

＆＃13;

<TABLE CELLSPACING=1 CELLPADDING=1 border=1 STYLE='width:80%;'>
<TR><TD>1
<TR><TD>2
<TR><TD>3
<TR><TD>4
<TR><TD>5
<TR><TD>6<INPUT type=button value='click to test' onclick=update_fix(this);>
<TR><TD>7
<TR><TD>8
<TR><TD>9
<TR><TD>10
<TR><TD>11
</TABLE>

＆＃13;

Answer 2

不要使用#foo css，试试这个，如果它有帮助那么你可以自己制作css课程：

<center>
  <div style="position: fixed; bottom: 0; left: 0; background-color: red; width: 100%;">
    <span style="width:35%;float: left;">fixed</span>
    <span style="width:15%;text-align: center;">sdf fixed</span>
    <span style="width:15%;float: right;">frw fixed</span>
  </div> 
</center>

希望它会帮助你

Answer 3

也许这个？

#foo {
  position: sticky;
  bottom: 0;
  background: red;
}

Answer 4

您只需添加<tfoot>代码

即可

<tfoot>
  <tr id="foo">
    <td style="width:35%;text-align: center;" >fixed</td>
    <td style="width:15%;text-align: center; " >
      sdf fixed
    </td>
    <td style="width:15%;text-align: center;">
      frw fixed
    </td>
  </tr>
</tfoot>

它将固定在脚上，但你需要改变桌子的固定高度。

以下是您的示例

的用法

https://plnkr.co/edit/KoJcY4TxZS3DJeYgnbcs?p=preview

css代码使内容不可滚动

4 个答案:

- 或 -