我有一个简单的html表:
<table>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tbody>
<tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr>
<tr class="even"><td>Value 3</td><td>Value 4</td></tr>
<tr class="odd"><td>Value 5</td><td>Value 6</td></tr>
<tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr>
</tbody>
</table>
我想用以下方式设计它:
我尝试了不同的东西:
table {
/* collapsed, because the bottom shadow on thead tr is hidden otherwise */
border-collapse: collapse;
}
/* Shadow on the header row*/
thead tr { box-shadow: 0 1px 10px #000000; }
/* Background colors defined on table cells */
th { background-color: #ccc; }
tr.even td { background-color: yellow; }
tr.odd td { background-color: orange; }
/* I would like spacing between thead tr and tr.first-row */
tr.first-row {
/* This doesn't work because of border-collapse */
/*border-top: 2em solid white;*/
}
tr.first-row td {
/* This doesn't work because of border-collapse */
/*border-top: 2em solid white;*/
/* This doesn't work because of the td background-color */
/*padding-top: 2em;*/
/* Margin is not a valid property on table cells */
/*margin-top: 2em;*/
}
有没有人有关于我如何做到这一点的任何提示?或者达到相同的视觉效果(即身体阴影+间距)?
答案 0 :(得分:119)
我想我已经在fiddle中了解了这一点,并更新了yours:
tbody:before {
content: "-";
display: block;
line-height: 1em;
color: transparent;
}
答案 1 :(得分:21)
此外,您可以使用零宽度非连接器来最小化 sinsedrix CSS:
tbody:before {line-height:1em; content:"\200C"; display:block;}
答案 2 :(得分:9)
这会在标题和表格内容之间留出一些空白
thead tr {
border-bottom: 10px solid white;
}
虽然设置边框颜色是一种欺骗方法,但它可以正常工作。
表单调查,您不能将box-shadow设置为表格行,但您可以将表格单元格设置为:
th {
box-shadow: 5px 5px 5px 0px #000000 ;
}
(我不确定你想要阴影的样子,所以只需调整上面的内容。)
答案 3 :(得分:6)
所以box-shadow在tr元素上效果不好......但它确实对伪内容元素起作用; sinsedrix让我走上正轨,这就是我最终的目标:
table {
position: relative;
}
td,th {padding: .5em 1em;}
tr.even td { background-color: yellow; }
tr.odd td { background-color: orange; }
thead th:first-child:before {
content: "-";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
box-shadow: 0 1px 10px #000000;
padding: .75em 0;
background-color: #ccc;
color: #ccc;
}
thead th {
padding-bottom: 2em;
}
答案 4 :(得分:5)
这适用于Chrome(对于我不知道的其他浏览器)。
RDOSession rdoSession = new RDOSession();
rdoSession.MAPIOBJECT = Globals.ThisAddIn.Application.Session.MAPIOBJECT;
RDOFolder rdoFolder = rdoSession.GetDefaultFolder(rdoDefaultFolders.olFolderSentMail);
RDOMail rdoItem = rdoInbox.Items.Add("IPM.Note");
rdoItem.Sent = true;
rdoItem.Recipients.AddEx("Joe The User", "user@domain.demo", "SMTP");
rdoItem.Subject = "test";
rdoItem.Body = "test body";
rdoItem.UnRead = false;
rdoItem.SentOn = rdoItem.ReceivedTime = new DateTime(2016, 10, 6, 8, 44, 0);
rdoItem.Sender = rdoItem.SentOnBehalfOf = rdoSession.CurrentUser;
rdoItem.Save();
这样的css代码在thead和table的tbody之间创建一个空的空白区域。 如果我将背景设置为透明,则上述tr的第一列&gt; th元素显示了自己的颜色(在我的情况下为绿色),也就是在元素绿色的前1厘米左右。
还使用&#34; - &#34;在行.theTargethead::after
{
content: "";
display: block;
height: 1.5em;
width: 100%;
background: white;
}
中签名而不是空字符串&#34;&#34;将打印页面导出到文件时可能会产生问题,即pdf。当然这是依赖于解析器/导出器的。
使用pdf编辑器打开的这种导出文件(例如:Ms word,Ms Excel,OpenOffice,LibreOffice,Adobe Acrobat Pro)仍然可以包含减号。空字符串没有相同的问题。
如果将打印的html表导出为图像,则两种情况都不会出现问题:无法呈现任何内容。
即使使用
,我也没有发现任何问题content : "-";
答案 5 :(得分:0)
虽然以上所有解决方案都不错,但结果在各个浏览器上均不一致,因此我根据对电子邮件模板的丰富经验,找到了一种更好的解决方案。 只需在实际tbody和thead之间添加一个虚拟tbody,嵌套在虚拟tbody中的td应当设置为所需间距的高度。下面的例子
<table>
<thead>
<tr>
<td>
</td>
</tr>
</thead>
// Dummy tbody
<tbody>
<tr>
<td class="h-5"></td>
</tr>
</tbody>
// Actual tbody
<tbody class="rounded shadow-outline">
<tr v-for="(tableRow, i) in tableBody" :key="`tableRow-${i}`">
<td v-for="tableRowItem in tableRow" :key="tableRowItem" class="table-body">
{{ tableRowItem }}
</td>
</tr>
</tbody>
</table>