草庐IT

html - Flexbox 类型固定标题,用于表格标记的可滚动内容

coder 2023-08-05 原文

我正在使用一个数据表,我正在为其使用传统的表格标记,但我想要的是我的表格从页面中的某个地方开始,我希望我的表格标题固定在它开始的位置并且表格主体应该滚动剩余页面高度
我在这里展示一个小例子

https://codepen.io/avreddy/pen/eyYBdB?editors=1100

.datatable{
  width: 50%;
  border-collapse: collapse;
}
td{
  text-align: center;
  border: 1px solid;
  padding:5px;
}
<body>
  <div class="somecontent">
    <h4>Some Content</h4><h4>Some Content</h4><h4>Some Content</h4>
  </div>
  <table class="datatable">
    <thead>
      <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr>
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr>
    </tbody>
  </table>
</body>


我知道我们可以从 flex-box 响应表中获取它,但我的限制是我必须使用传统的表标记所以如果告诉我除了 flexbox 响应表是否还有其他方法
谢谢

最佳答案

.datatable{
  width: 50%;
  border-collapse: collapse;
}

/*this code is added to fix header at the top of the screen*/

thead th{
  position: sticky; /*stick the element*/
  top: 0px;
  background: grey;
}
td{
  text-align: center;
  border: 1px solid;
  padding:5px;
}
<body>
  <div class="somecontent">
    <h4>Some Content</h4><h4>Some Content</h4><h4>Some Content</h4>
  </div>
  <table class="datatable">
    <thead>
      <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr>
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr>
    </tbody>
  </table>
</body>

你希望像这样的标题会粘在页面顶部。

关于html - Flexbox 类型固定标题,用于表格标记的可滚动内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47769938/

有关html - Flexbox 类型固定标题,用于表格标记的可滚动内容的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  3. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值,但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗?ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值,你可以这样做:values=@input[x]

  4. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  5. ruby - Infinity 和 NaN 的类型是什么? - 2

    我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN?它们是对象、关键字还是其他东西? 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串

  6. ruby - 检查方法参数的类型 - 2

    我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样?我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗? 最佳答案 使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时,它将引发ArgumentError。defmy_method(number)

  7. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  8. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  9. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片,我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在,我只能让文本显示在左上角,但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法,你必须自己移植

  10. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

随机推荐