我试图在表内创建表意味着嵌套表。现在它看起来像这样 screenshot .但我需要从左对齐。因为我在每一行中都使用了相同的计数列。 您可以看到我为获得此输出所做的尝试。
提前致谢
.report-table {
border-collapse: collapse;
width: 100%;
font-family: Arial;
}
.report-table .col-name {
width: 150px;
}
.report-table .col-title {
width: 150px;
}
.report-table .col-carried {
width: 60px;
}
.report-table .col-earned {
width: 60px;
}
.report-table .col-used {
width: 60px;
}
.report-table .col-scheduled {
width: 60px;
}
.report-table .col-balance {
width: 60px;
}
.report-table .col-to-be {
width: 60px;
}
.report-table .col-available {
width: 60px;
}
.report-table .inner-table tr td{
border: 0;
}
.report-table.hr-table .inner-table {
background: none;
border: 0;
}
.report-table.hr-table .inner-table td {
vertical-align: top;
}
.report-table.hr-table tr {
border-top: 1px solid #333;
}
.report-table.hr-table td,
.report-table.hr-table th{
padding: 10px;
vertical-align: top;
text-align: left;
}
.report-table.hr-table .inner-table td:first-child {
padding-left: 0;
}<table class="tablesorter hr-table hr-table-striped report-table">
<thead>
<tr>
<th class="header col-name">Name<span></span></th>
<th class="header col-title">Leave Title<span></span></th>
<th class="header col-carried">Carried Over<span></span></th>
<th class="header col-earned">Earned<span></span></th>
<th class="header col-used">Used <span></span></th>
<th class="header col-scheduled">Scheduled <span></span></th>
<th class="header col-balance">Balance<span></span></th>
<th class="header col-to-be">To-be-earned<span></span></th>
<th class="header col-available">Avaliable<span></span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-name"><a href="#">Ethan Hunt</a></td>
<td colspan="8">
<table class=" hr-table inner-table">
<tr>
<td class="col-title">Vacation</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Sickness</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Training</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="col-name"><a href="#">Lara Craft</a></td>
<td class="col-title">Training</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-name"><a href="#">Ethan Hunt</a></td>
<td colspan="8">
<table class=" hr-table inner-table">
<tr>
<td class="col-title">Vacation</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Sickness</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Training</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
这是 JSFIDDLE
最佳答案
任何嵌套表格都会使所有相关表格的整体布局和功能复杂化。 <tbody> element 的创建是为了让我们能够将一个表划分为多个部分，这些部分共享完全相同的列。引入另一个具有相同类型数据的表并将其塞入一列是没有意义的。将它包装在 <table> 中没有任何优势。元素然后将其保存在另一个表的一列中，嵌套 <table> 内的所有单元格仍然受制于内部的风格和行为<table> .只是名称列的一列被拉伸(stretch)以便与外部 <table> 的列对齐。没有意义。
细节在演示中有广泛的评论。虽然响应式(最低限度)，但最好在全页模式下查看
body,
html {
width: 100%;
height: 100%;
font: 400 100%/1.2 Arial
}
* {
margin: 0;
padding: 0;
border: 0
}
/* table-layout: fixed gives us more control over <td>
|| dimensions and <table> behavior
*/
.report-table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
margin: 30px auto;
font-size: 1em
}
thead tr {
border-bottom: 3px double #111
}
/* Each <th> in the <thead> has text that clips into an
|| automatic ellipsis if and when <table> gets narrower
*/
thead th {
padding: 10px 5px 5px;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
tbody tr {
border: 1px transparent
}
tbody tr:last-of-type {
border-bottom: 1px solid #111
}
tbody th,
td {
vertical-align: top;
text-align: left;
padding: 10px
}
.full {
border-bottom: 1px solid #111
}
td {
text-align: center
}
col {
width: 10%
}
col.name,
col.type {
width: 15%
}
/* CSS HIghlight Featue */
/* All checkboxes and radio buttons are
|| display:none;
*/
.chx,
.rad,
.reset {
display: none
}
label {
font: inherit;
cursor: pointer;
display: inline-block
}
/* These rulesets will highlight a column when
|| a <label> is clicked which in turn checks the
|| checkbox which in turn changes the background
|| color of a column
*/
#chx1:checked~table col.name,
#chx2:checked~table col.type {
background: #ff0
}
#chx3:checked~table col.carried,
#chx4:checked~table col.earned {
background: #00ff80
}
#chx5:checked~table col.used {
background: #ff8080
}
#chx6:checked~table col.scheduled,
#chx7:checked~table col.balance,
#chx8:checked~table col.yet,
#chx9:checked~table col.available {
background: #ff0
}
.on {
display: inline-block
}
/* These radio buttons operate in the same
|| manner as the checkboxes with some exceptions:
|| - There's 2 <label>s for each radio
|| - The <label>s toggle a row highlighting
|| - The <label>s alternate between display:
|| none and inline-block.
|| - Only one <tbody> at a time may be highlighted
*/
#rad1:checked~table tbody#e-hunt-40318,
#rad2:checked~table tbody#l-craft-61232,
#rad3:checked~table tbody#r-hertz-20663 {
background: rgba(0, 255, 255, .5)
}
#rad1:checked~table tbody#e-hunt-40318 .reset {
display: inline-block
}
#rad1:checked~table tbody#e-hunt-40318 .on {
display: none
}
#rad1:checked~table tbody#e-hunt-40318 tr,
#rad3:checked~table tbody#r-hertz-20663 tr {
border-bottom: 1px dashed red
}
#rad2:checked~table tbody#l-craft-61232 .reset {
display: inline-block
}
#rad2:checked~table tbody#l-craft-61232 .on {
display: none
}
#rad3:checked~table tbody#r-hertz-20663 .reset {
display: inline-block
}
#rad3:checked~table tbody#r-hertz-20663 .on {
display: none
}
#reset:checked~table tbody {
background: initial
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='report.css' rel='stylesheet'>
<style>
</style>
</head>
<body>
<!--
|[Highlighting (Optional)
These checkboxes and radio buttons are optional.
They are part of an intricate highlighting feature
that leverages:
- cascading
- sibling selectors: ~
- <label> and 'for' attribute
- checkbox and radio <input>
input.chx highlights columns-->
<input id='chx1' class='chx' type='checkbox'>
<input id='chx2' class='chx' type='checkbox'>
<input id='chx3' class='chx' type='checkbox'>
<input id='chx4' class='chx' type='checkbox'>
<input id='chx5' class='chx' type='checkbox'>
<input id='chx6' class='chx' type='checkbox'>
<input id='chx7' class='chx' type='checkbox'>
<input id='chx8' class='chx' type='checkbox'>
<input id='chx9' class='chx' type='checkbox'>
<!--input.rad highlights a row-->
<input id='rad1' class='rad' name='rad' type='radio'>
<input id='rad2' class='rad' name='rad' type='radio'>
<input id='rad3' class='rad' name='rad' type='radio'>
<input id='reset' class='rad' name='rad' type='radio'>
<table class="tablesorter hr-table hr-table-striped report-table">
<!--
|[<colgroup>/<col> (Recommended)
<colgroup> and <col> are elements with a
special purpose of assigning a limited number of
style properties to a column (vertical stack of
<td>). Using them will reduce amount of classes
assigned to individual cells.-->
<colgroup>
<col class='name'>
<col class='type'>
<col class='carried'>
<col class='earned'>
<col class='used'>
<col class='scheduled'>
<col class='balance'>
<col class='yet'>
<col class='available'>
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Leave Type</th>
<th>Carried Over</th>
<th>Earned</th>
<th>Used</th>
<th>Scheduled</th>
<th>Balance</th>
<th>Yet Earned</th>
<th>Avaliable</th>
</tr>
</thead>
<!--
|[<tbody> (Required)
Instead of using a whole new <table> and shoving it
inside of a <td>, use a <tbody>. <tbody> is semantically,
logically, and aesthetically a superior choice
compared to a nested <table>.
<tbody> is one of the 3 major sections of a <table>
and it's the only one of those 3 (the other 2 are
<thead> and <tfoot>) that are actually required when
building a <table>. Although one can build a <table>
and neglect adding the <tbody>, all modern browsers
will add it in automatically. Another unique character
istic of <tbody> that the other 2 lacks is that we
can have multiple <tbody> in a <table>.
-->
<!--| Each <tbody> represents an employee's leave data
The class is .full (fulltime employee) or .part
(parttime employee). The id is the employee's
first initial, last name, and ID number.
-->
<tbody class='full' id='e-hunt-40318'>
<tr>
<!--| The first column comprises of <th>:
- Data: Employee's Full Name
- Class: .part or .full
- Style: From col.name
- Markup: <th> one row if th.part; 3 rows if th.full
by using the rowspan attribute.
-->
<th rowspan='3'>
<!--| <label>s toggle the radio buttons and the radio
buttons toggle row highlighting.
-->
<label for='rad1' class='on'>Ethan Hunt</label>
<label for='reset' class='reset'>Ethan Hunt</label>
</th>
<td>Vacation</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Illness</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Training</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
</tbody>
<tbody class='part' id='l-craft-61232'>
<tr>
<th>
<label for='rad2' class='on'>Lara Craft</label>
<label for='reset' class='reset'>Lara Craft</label>
</th>
<td>Training</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
</tbody>
<tbody class='full' id='r-hertz-20663'>
<tr>
<th rowspan='3'>
<label for='rad3' class='on'>Richard Hertz</label>
<label for='reset' class='reset'>Richard Hertz</label>
</th>
<td>Vacation</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Illness</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Training</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
</tbody>
<!--<label for='id'> (Optional)
|[<label for='id'></label> <input id='id' type='radio'>
<tfoot> contains the <label>s that toggle the
columns' highlighting. Note that each <label>
has a for attribute which value is the id of
the checkbox that the <label> is associated with.
This association allows the hidden <input>s
to react from any click on it's associated
<label>
-->
<tfoot>
<tr>
<td>
<label for='chx1'>COL1</label>
</td>
<td>
<label for='chx2'>COL2</label>
</td>
<td>
<label for='chx3'>COL3</label>
</td>
<td>
<label for='chx4'>COL4</label>
</td>
<td>
<label for='chx5'>COL5</label>
</td>
<td>
<label for='chx6'>COL6</label>
</td>
<td>
<label for='chx7'>COL7</label>
</td>
<td>
<label for='chx8'>COL8</label>
</td>
<td>
<label for='chx9'>COL9</label>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
关于html - 表格列的对齐方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44305522/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
在我的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并在看到包时选择
question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我收到格式为的回复#我需要将其转换为哈希值(针对活跃商家)。目前我正在遍历变量并执行此操作:response.instance_variables.eachdo|r|my_hash.merge!(r.to_s.delete("@").intern=>response.instance_eval(r.to_s.delete("@")))end这有效，它将生成{:first="charlie",:last=>"kelly"},但它似乎有点hacky和不稳定。有更好的方法吗？编辑:我刚刚意识到我可以使用instance_variable_get作为该等式的第二部分，但这仍然是主要问题。
我正在学习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)'
我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c
