我已经实现了一个水平滚动的表格，并要求在垂直滚动时固定前两列。我创建了一个 stackblitz 来显示两个表。我要寻找的是，当用户滚动第二个表时，前两行法律类名称和基金名称应该是固定的。
我尝试将以下类应用于相应的 tds，但没有成功
.stickyRows {
position: sticky;
}
这是堆栈 Blitz
https://stackblitz.com/edit/angular-o2ukfs
th {
padding: 7px;
position: sticky;
left: 0px;
min-width: 250px;
width: 250px;
background-color: #f5f7f7;
}
td {
padding: 7px;
min-width: 250px;
/* max-width: 300px; */
}
.fundClassesTable {
table-layout: fixed;
}
.cellbgcolor {
color: transparent;
}
.btn {}
.tableItem {
text-align: left;
border-left: solid 1px lightgrey;
border-top: solid 1px lightgrey;
border-right: solid 1px lightgrey;
border-bottom: solid 1px lightgrey;
}
.rowItem:hover {
background-color: #f5f7f7;
}
label {
margin-left: 0.5rem;
vertical-align: middle
}
.panel-heading {
color: black;
border-color: #ddd;
overflow: hidden;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.panel-heading .left-label {
display: inline-block;
padding-top: 5px !important;
}
.scrollClass {
overflow-x: scroll;
display: grid;
overflow-y:hidden;
height: 100%;
}
.panel-heading label {
margin-bottom: 0px !important;
}
#FundClass tr:hover {
background-color: #ECF0F1;
}
.headcol {
position: absolute;
min-width: 300px;
max-width: 300px;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol:before {
content: 'Row ';
}
.collapsed {
color: #d6630a;
font-size: 22px;
text-decoration: none;
font-weight: bold;
}
.expanded {
color: #d6630a;
font-size: 22px;
text-decoration: none;
font-weight: bold;
}
.fixed-side {
border: 1px solid #000;
background: #eee;
visibility: visible;
}
.card-body {
flex: 1 1 auto;
padding: 0px;
margin: 10px 0;
background-color: white;
}
<div class="card">
<div class="card-header panel-heading">
<span class="left-label" style="font-size: 18px; font-weight: bold; ">Accounting Fund Classes</span>
</div>
<div [ngClass]="{'show': isExpanded}" id="fundClass" class="collapse" role="tabpanel" aria-labelledby="fundClass_heading"
data-parent="#fundClass" [attr.aria-expanded]="isExpanded">
<div class="card-body scrollClass" *ngIf="data">
<table id="FundClass" class="fundClassesTable table-striped">
<tr *ngFor="let c of ColumnNames">
<th Fund Name scope="col" [ngClass]="c != 'Buttons1'? 'tableItem bold' : 'tableItem cellbgcolor'"> {{ c }}</th>
<ng-container *ngFor="let f of data let i=index">
<td class="tableItem" style="font-weight: bold" *ngIf="c == 'Fund Name'">
{{ f.FundName}}
</td>
<td [attr.id]="'f.Id'" *ngIf="c == 'Accounting Class Name'"
class="tableItem">
{{ f.FundName}}
</td>
<td class="tableItem" *ngIf="c == 'Class ID'">{{f.Id}}</td>
<td [attr.id]="'f.Id'" *ngIf="c == 'Legal Fund Class'"
class="tableItem">
{{ f.LegalFundClassName}}
</td>
<td [attr.id]="'f.Id'" *ngIf="c == 'Invested Amount'"
class="tableItem">
{{ f.InvestedAmount | number : '.2-2'}}
</td>
<td [attr.id]="'f.Id'" *ngIf="c == 'Vehicle Type'"
class="tableItem">
{{ f.VehicleTypeName}}
</td>
<td [attr.id]="'f.Id'" *ngIf="c == 'Closure Status'"
class="tableItem">
{{ f.ClosureStatusName}}
</td>
<td class="tableItem" *ngIf="c == 'Buttons1'">
<button *ngIf="!EditMode[f.Id]" type="button"
class="btn btn-primary btn mr-1 "
(click)="buttonClicked(f.Id)">Edit</button>
<button *ngIf="EditMode[f.Id]" type="button"
class="btn btn-primary btn mr-1"
(click)="buttonClicked(f.Id)">Cancel</button>
</td>
</ng-container>
</tr>
</table>
</div>
</div>
</div>
最佳答案
我希望这就是您要找的:
app.component.css
/* Container should define how tall the scrollable content is */
.scrollClass{
height: 500px;
}
/* tagetting the first <th>; to ensure <th> are scrolled along with <td> */
.fundClassesTable tr:nth-child(1) th{
z-index: 3;
position: sticky;
position: -webkit-sticky;
top: 2px;
}
/* target all <td> in the first row to be sticky */
.fundClassesTable tr:nth-child(1) td{
color: red;
position: sticky;
position: -webkit-sticky;
top: 2px;
z-index: 2;
background-color: white;
font-weight: bold;
}
/* Same as above but with top property as 36px
because the 2nd "row" is 36px from the top of <table> */
.fundClassesTable tr:nth-child(2) th{
z-index: 3;
position: sticky;
position: -webkit-sticky;
top: 38px;
}
.fundClassesTable tr:nth-child(2) td{
color: red;
position: sticky;
position: -webkit-sticky;
top: 38px;
z-index: 2;
background-color: white;
font-weight: bold;
}
Riv's solution has worked for me but i am left with one nagging problem. As I scroll through the fixed rows , I can see the data of the rows visible between gaps of the fixed rows and border of the fixed rows arent visible
可能不是最好的解决方案，但我会使用::after 伪选择器为粘附的表格单元格创建背景，以便在向下滚动时隐藏背景单元格。
.fundClassesTable tr:nth-child(1)::after{
content: '';
position: absolute;
height: 71px;
width: 96.7%;
top: 55px;
left: 19px;
z-index: 1;
background-color: white; //create a white background to cover your other cells when scrolled down
border: solid 1px deeppink;
}
关于html - 卡住页面垂直滚动的前两行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57200994/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
1.upto(9){|x|printx}为什么这行不通？{printx|x}}y呢？ 最佳答案 它用于传递给您的block的参数。即在您的示例中，upto将使用1到9中的每个数字调用您的block，当前值可作为x获得。block参数可以有任何名称，就像方法参数一样。例如1.upto(9){|num|putsnum是有效的。就像一个方法的参数一样，一个block也可以有多个参数。例如hash.each_pair{|key,value|puts"#{key}is#{value}"} 关于ru
require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie
我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315
考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://