表 Zebra,在 IE9 中设置 TR 和 COL 样式
我写了我认为非常优雅的 css 和表格,它用很少的带宽和没有 javascript 进行斑马格式,但它在 IE9 中不起作用。
它应该是什么样子:
它在 IE9 中的样子:
源代码:
<!DOCTYPE html>
<html>
<head>
<title>SQLFlight HD Status</title>
<style type="text/css">
table {
border-collapse:collapse;
border-spacing:0;
}
th {
background:black;
color:white;
}
tr:nth-child(odd), col:nth-child(odd) {
background:rgba(200,200,200,0.5);
}
tr:nth-child(even) {
background:rgba(255,255,255,0.5);
}
td,th {
padding: 4px 10px;
}
</style>
</head>
<body>
<table>
<col/><col/><col/><col/><col/><col/>
<thead>
<tr>
<th>Drive</th><th>Label</th><th>Size</th><th>Used</th><th colspan="2">Free</th>
</tr>
</thead>
<tbody>
<tr>
<td>C:</td><td>OS</td><td>136 GB</td><td align="right">74 GB</td>
<td align="right">62 GB</td><td align="right">46 %</td>
</tr>
<tr>
<td>E:</td>
<td>Data2</td>
<td>394 GB</td>
<td align="right">280 GB</td>
<td align="right">114 GB</td>
<td align="right">29 %</td>
</tr>
<tr>
<td>F:</td><td>Data3</td><td>164 GB</td><td align="right">100 GB</td><td align="right">64 GB</td><td align="right">39 %</td>
</tr>
</tbody>
</table>
</body>
</html>
我喜欢优雅、低带宽的解决方案,没有大量复杂的标记。我假设问题是这个片段:
tr:nth-child(odd), col:nth-child(odd) {
background:rgba(200,200,200,0.5);
}
我假设我测试过的所有浏览器(IE9 除外)都结合了 tr 和 col 样式,但 IE9 只允许 tr 样式或 col 样式,但不能同时使用两者。那么有没有一种方法可以像我在这里所做的那样,只用三行 CSS 来编码我的白色、浅灰色和浅灰色,并且也可以在 IE9 中工作?请记住,我也不想向 HTML 添加一堆类标签或样式标签。我是否正确,这只是 tr 和 col 背景样式的组合在 IE9 中失败了?或者是其他东西在 IE9 中不起作用?任何反馈、对正在发生的事情的解释以及任何简单的解决方案将不胜感激。
谢谢。
I wrote what I thought was very elegant css and table that does zebra formatting with very little bandwidth and no javascript, but it doesn't work in IE9.
How it should look:
How it looks in IE9:
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>SQLFlight HD Status</title>
<style type="text/css">
table {
border-collapse:collapse;
border-spacing:0;
}
th {
background:black;
color:white;
}
tr:nth-child(odd), col:nth-child(odd) {
background:rgba(200,200,200,0.5);
}
tr:nth-child(even) {
background:rgba(255,255,255,0.5);
}
td,th {
padding: 4px 10px;
}
</style>
</head>
<body>
<table>
<col/><col/><col/><col/><col/><col/>
<thead>
<tr>
<th>Drive</th><th>Label</th><th>Size</th><th>Used</th><th colspan="2">Free</th>
</tr>
</thead>
<tbody>
<tr>
<td>C:</td><td>OS</td><td>136 GB</td><td align="right">74 GB</td>
<td align="right">62 GB</td><td align="right">46 %</td>
</tr>
<tr>
<td>E:</td>
<td>Data2</td>
<td>394 GB</td>
<td align="right">280 GB</td>
<td align="right">114 GB</td>
<td align="right">29 %</td>
</tr>
<tr>
<td>F:</td><td>Data3</td><td>164 GB</td><td align="right">100 GB</td><td align="right">64 GB</td><td align="right">39 %</td>
</tr>
</tbody>
</table>
</body>
</html>
I like elegant, low bandwidth solutions without a ton of convoluted markup. I assume that the issue is this snippet:
tr:nth-child(odd), col:nth-child(odd) {
background:rgba(200,200,200,0.5);
}
I'm assuming that all the browsers I have tested, except IE9, combine the tr and col styling, but IE9 only allows tr styling or col styling, but not both at the same time. So is there a way to code my white, light gray, and lighter gray with just three lines of CSS like I have done here that also works in IE9? Keep in mind that I don't want to have to add a bunch of class tags or style tags to my HTML either. Am I right that it is just the combining of tr and col background styling that is failing in IE9? or is something else not working in IE9? Any feedback, explanation of what's happening plus any simple solutions will be greatly appreciated.
Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
你不能只使用这样的东西:
can't you just use something like this: