斑马表 [英] Zebra Table
问题描述
我正在尝试创建一个Zebra表，其中每个Zebra剥离表。由两行
行组成。我正在使用经典表来创建Zebra表。在我的CSS中，我
有
..dark {
背景颜色：＃00FFFF;
}
..light {
background-color：#CCFFFF;
}
< tr class =" light">
< td class =" name"> Name< / td>
< td class =" addr"> Street< / td>
< td class =" email">电子邮件< / td>
< td class =" interest">兴趣< / td>
< / tr>
< tr class =" light">
< td> Spouse< / td>
< td>电话< / td>
< td>配偶电子邮件< / td>
< td>配偶兴趣< / td>
< / tr>
< tr class =" dark" ;>
< td class =" name"> Joe< / td>
< td class =" addr"> Elm< / td> ;
< td class =" email"> Something< / td>
< td class =" interest">更多< / td>
< / tr>
< tr class =" dark">
< td> Jane< / td>
< td> 999 999-9999< / td>
< ; td> Something Email< / td>
< td> Something Interests< / td>
< / tr>
我想将两行包装在一个单独的定义中，比如使用< divor a
< span但是能够完成这项工作。
< div class =" light">
< tr>
< td class =" name"> Name< / td>
< td class =" addr"> Street< / td>
< td class =" email">电子邮件< / td>
< td class =" interest">兴趣< / td>
< / tr>
< tr class =" light ">
< td> Spouse< / td>
< td>电话< / td>
< td>配偶Emai l< / td>
< td>配偶兴趣< / td>
< / tr>
< / div>
< div class =" dark">
< tr>
< td class =" name" ;> Joe< / td>
< td class =" addr"> Elm< / td>
< td class =" email"> ; Something< / td>
< td class =" interest">更多< / td>
< / tr>
< tr class =" dark">
< td> Jane< / td>
< td> 999 999-9999< / td>
< td>东西电子邮件< / td>
< td>兴趣爱好< / td>
< / tr>
< / div>
感谢您的帮助。谢谢...
布鲁斯
I am trying to create a Zebra table where each Zebra "Strip" consists of two
rows. I am using a classical table to create the Zebra table. In my CSS, I
have
..dark {
background-color: #00FFFF;
}
..light {
background-color: #CCFFFF;
}
<tr class="light ">
<td class="name">Name</td>
<td class="addr">Street</td>
<td class="email">Email</td>
<td class="interest">Interests</td>
</tr>
<tr class="light ">
<td>Spouse</td>
<td>Telephone</td>
<td>Spouse Email</td>
<td>Spouse Interests</td>
</tr>
<tr class="dark">
<td class="name">Joe</td>
<td class="addr">Elm</td>
<td class="email">Something</td>
<td class="interest">More</td>
</tr>
<tr class="dark">
<td>Jane</td>
<td>999 999-9999</td>
<td>Something Email</td>
<td>Something Interests</td>
</tr>
I would to wrap the two rows in a single definition, like with a <divor a
<spanbut having been able to make that work.
<div class="light">
<tr>
<td class="name">Name</td>
<td class="addr">Street</td>
<td class="email">Email</td>
<td class="interest">Interests</td>
</tr>
<tr class="light ">
<td>Spouse</td>
<td>Telephone</td>
<td>Spouse Email</td>
<td>Spouse Interests</td>
</tr>
</div>
<div class="dark">
<tr>
<td class="name">Joe</td>
<td class="addr">Elm</td>
<td class="email">Something</td>
<td class="interest">More</td>
</tr>
<tr class="dark">
<td>Jane</td>
<td>999 999-9999</td>
<td>Something Email</td>
<td>Something Interests</td>
</tr>
</div>
Appreciate your help. Thanks...
Bruce
推荐答案
" Bruce A .Jerseth < ju *********** @ bellsouth.netwrote in message
news：gN *************** @ bignews5.bellsouth .net ...
"Bruce A. Julseth" <ju***********@bellsouth.netwrote in message
news:gN***************@bignews5.bellsouth.net...
>我正在尝试创建一个Zebra表，其中每个Zebra剥离表。由两行组成。我正在使用经典表来创建Zebra表。在我的
CSS中，我有
.dark {
背景颜色：＃00FFFF;
}
.light {
背景颜色：#CCFFFF;
}
< tr class =" light">
< td class =" name"> Name< / td>
< td class =" ; addr"> Street< / td>
< td class =" email">电子邮件< / td>
< td class =" interest" ;>兴趣< / td>
< / tr>
< tr class =" light">
< ; td> Spouse< / td>
< td>电话< / td>
< td>配偶电子邮件< / td>
< td>配偶兴趣< / td>
< / tr>
< td class =" name"> Joe< / td>
< td class =" addr"> Elm< / td>
< td class =" email&qu ot;> Something< / td>
< td class =" interest">更多< / td>
< / tr>
< tr class =" dark">
< td> Jane< / td>
< td> 999 999-9999< / td>
< td> Something Email< / td>
< td> Something Interests< / td>
< / tr> ;
我想将两行包装在一个单一的定义中，比如使用< divor
a< span但能够完成这项工作。
< div class =" light">
< tr>
< td class =" name"> Name< / td>
< td class =" addr"> Street< / td>
< td class =" email" >电子邮件< / td>
< td class =" interest">兴趣< / td>
< / tr>
< tr class =" light">
< td> Spouse< / td>
< td>电话< / td>
< td>配偶电子邮件< / td>
< td>配偶兴趣< / td> ;
< / tr>
< / div>
< div class =" dark">
< tr>
< td class =" name"> Joe< / td>
< td class =" ; addr"> Elm< / td>
< td class =" email"> Something< / td>
< td class =" interest" ;>更多< / td>
< / tr>
< tr class =" dark">
< td> Jane< / td>
< td> 999 999-9999< / td>
< td>电子邮件< / td>
< td>兴趣爱好< / td>
< / tr>
< / div>
感谢您的帮助。谢谢...
布鲁斯
>I am trying to create a Zebra table where each Zebra "Strip" consists of
two rows. I am using a classical table to create the Zebra table. In my
CSS, I have
.dark {
background-color: #00FFFF;
}
.light {
background-color: #CCFFFF;
}
<tr class="light ">
<td class="name">Name</td>
<td class="addr">Street</td>
<td class="email">Email</td>
<td class="interest">Interests</td>
</tr>
<tr class="light ">
<td>Spouse</td>
<td>Telephone</td>
<td>Spouse Email</td>
<td>Spouse Interests</td>
</tr>
<tr class="dark">
<td class="name">Joe</td>
<td class="addr">Elm</td>
<td class="email">Something</td>
<td class="interest">More</td>
</tr>
<tr class="dark">
<td>Jane</td>
<td>999 999-9999</td>
<td>Something Email</td>
<td>Something Interests</td>
</tr>
I would to wrap the two rows in a single definition, like with a <divor
a <spanbut having been able to make that work.
<div class="light">
<tr>
<td class="name">Name</td>
<td class="addr">Street</td>
<td class="email">Email</td>
<td class="interest">Interests</td>
</tr>
<tr class="light ">
<td>Spouse</td>
<td>Telephone</td>
<td>Spouse Email</td>
<td>Spouse Interests</td>
</tr>
</div>
<div class="dark">
<tr>
<td class="name">Joe</td>
<td class="addr">Elm</td>
<td class="email">Something</td>
<td class="interest">More</td>
</tr>
<tr class="dark">
<td>Jane</td>
<td>999 999-9999</td>
<td>Something Email</td>
<td>Something Interests</td>
</tr>
</div>
Appreciate your help. Thanks...
Bruce
我想我找到了解决方案..
添加
span.dark tr {
背景颜色：＃00FFFF;
}
span.light tr {
背景颜色：#CCFFFF;
}
好像在做诀窍..谢谢......
I think I found the solution..
Adding
span.dark tr {
background-color: #00FFFF;
}
span.light tr {
background-color: #CCFFFF;
}
seems to be doing the trick.. Thanks...
" Bruce A. Julseth" < ju *********** @ bellsouth.netwrote in message
news：ZV *************** @ bignews5.bellsouth .net ...
"Bruce A. Julseth" <ju***********@bellsouth.netwrote in message
news:ZV***************@bignews5.bellsouth.net...
>
" Bruce A. Julseth" < ju *********** @ bellsouth.netwrote in message
news：gN *************** @ bignews5.bellsouth .net ...
>
"Bruce A. Julseth" <ju***********@bellsouth.netwrote in message
news:gN***************@bignews5.bellsouth.net...
>>我正在尝试创建一个Zebra表，其中每个Zebra剥离表。由两行组成。我正在使用经典表来创建Zebra表。在我的
CSS中，我有
.dark {
背景颜色：＃00FFFF;
}
.light {
background-color：#CCFFFF;
}
< tr class =" light">
< td class =" name"> Name< ; / td>
< td class =" addr"> Street< / td>
< td class =" email">电子邮件< / td>
< td class =" interest">兴趣< / td>
< / tr>
< tr class =" light">
< td> Spouse< / td>
< td>电话< / td>
< td>配偶电子邮件< / td>
< td>配偶兴趣< / td>
< / tr>
< tr class =" dark">
< td class =" name"> Joe< / td>
< td class = " addr"> Elm< / td>
< td class =" email"> Something< / td>
< td class =" interest">更多< / td> ;
< / tr>
< tr class =&quo t; dark">
< td> Jane< / td>
< td> 999 999-9999< / td>
< td> Something Email< / td>
< td>东西< / td>
< / tr>
我想把两行包装在一个单一的定义中，比如< divor
a< spanbut已经能够完成这项工作。
< div class =" light">
< tr>
< td class = " name"> Name< / td>
< td class =" addr"> Street< / td>
< td class =" email"> Email< / td> ;
< td class =" interest">兴趣< / td>
< / tr>
< tr class =" light">
< td> Spouse< / td>
< td>电话< / td>
< td>配偶电子邮件< / td>
< td>配偶兴趣< / td>
< / tr>
< / div>
< div class =" dark">
< tr>
< ; td class = " name"> Joe< / td>
< td class =" addr"> Elm< / td>
< td class =" email"> Something< / td> ;
< td class =" interest">更多< / td>
< / tr>
< tr class =" dark">
< ; td> Jane< / td>
< td> 999 999-9999< / td>
< td> Something Email< / td>
< td> Something Interests< / td>
< / tr>
< / div>
感谢您的帮助。谢谢...
布鲁斯
>>I am trying to create a Zebra table where each Zebra "Strip" consists of
two rows. I am using a classical table to create the Zebra table. In my
CSS, I have
.dark {
background-color: #00FFFF;
}
.light {
background-color: #CCFFFF;
}
<tr class="light ">
<td class="name">Name</td>
<td class="addr">Street</td>
<td class="email">Email</td>
<td class="interest">Interests</td>
</tr>
<tr class="light ">
<td>Spouse</td>
<td>Telephone</td>
<td>Spouse Email</td>
<td>Spouse Interests</td>
</tr>
<tr class="dark">
<td class="name">Joe</td>
<td class="addr">Elm</td>
<td class="email">Something</td>
<td class="interest">More</td>
</tr>
<tr class="dark">
<td>Jane</td>
<td>999 999-9999</td>
<td>Something Email</td>
<td>Something Interests</td>
</tr>
I would to wrap the two rows in a single definition, like with a <divor
a <spanbut having been able to make that work.
<div class="light">
<tr>
<td class="name">Name</td>
<td class="addr">Street</td>
<td class="email">Email</td>
<td class="interest">Interests</td>
</tr>
<tr class="light ">
<td>Spouse</td>
<td>Telephone</td>
<td>Spouse Email</td>
<td>Spouse Interests</td>
</tr>
</div>
<div class="dark">
<tr>
<td class="name">Joe</td>
<td class="addr">Elm</td>
<td class="email">Something</td>
<td class="interest">More</td>
</tr>
<tr class="dark">
<td>Jane</td>
<td>999 999-9999</td>
<td>Something Email</td>
<td>Something Interests</td>
</tr>
</div>
Appreciate your help. Thanks...
Bruce
我想我找到了解决方案..
添加
span.dark tr {
背景颜色：＃00FFFF;
}
span.light tr {
背景颜色：#CCFFFF;
}
似乎做的伎俩..谢谢...
I think I found the solution..
Adding
span.dark tr {
background-color: #00FFFF;
}
span.light tr {
background-color: #CCFFFF;
}
seems to be doing the trick.. Thanks...
Nope ..它没有工作..对不起。 CSS中有人可以帮助我吗？
谢谢你，并且对于误报感到抱歉。它在Dreamweaver中工作得很好，但在我的本地主机上以及我上传它时，
在Safari中失败。
Nope.. It didn''t work.. Sorry. Can someone out there in CSS land help me?
Thanks and sorry for the false alarm. It worked fine in Dreamweaver, but
failed in Safari both on my localhost and when I upload it.
Bruce A. Julseth schrieb：
Bruce A. Julseth schrieb:
" Bruce A. Julseth" < ju *********** @ bellsouth.netwrote in message
news：gN *************** @ bignews5.bellsouth .net ...
"Bruce A. Julseth" <ju***********@bellsouth.netwrote in message
news:gN***************@bignews5.bellsouth.net...
> < tr class =" light">
< td class =" name"> Name< / td>
< td class =" addr"> Street< / td>
< td class =" email">电子邮件< / td>
< td class =" interest">兴趣< / td>
< / tr> ;
< tr class =" light">
< td> Spouse< / td>
< td>电话< / td>
< td> ;配偶电子邮件< / td>
< td>配偶兴趣< / td>
< / tr>
> <tr class="light ">
<td class="name">Name</td>
<td class="addr">Street</td>
<td class="email">Email</td>
<td class="interest">Interests</td>
</tr>
<tr class="light ">
<td>Spouse</td>
<td>Telephone</td>
<td>Spouse Email</td>
<td>Spouse Interests</td>
</tr>
看起来这些是标题单元格。所以使用th元素！
Looks like these are header cells. So use the th element!
> < tr class =" dark">
< td class =" name"> Joe< / td>
< td class =" addr"> Elm< / td> ;
< td class =" email"> Something< / td>
< td class =" interest">更多< / td>
< / tr>
< tr class =" dark">
< td> Jane< / td>
< td> 999 999-9999< / td>
< td> Something Email< / td>
< td> Something Interests< / td>
< / tr>
> <tr class="dark">
<td class="name">Joe</td>
<td class="addr">Elm</td>
<td class="email">Something</td>
<td class="interest">More</td>
</tr>
<tr class="dark">
<td>Jane</td>
<td>999 999-9999</td>
<td>Something Email</td>
<td>Something Interests</td>
</tr>
屏幕阅读器用户可能/将很难找出哪些
列标题单元格属于哪些数据细胞。您可以通过td / @ headers和th / @ id关联它们
。
It can/will be difficult for a screen reader user to find out which
column header cells belong to which data cell. You can associate them
via td/@headers and th/@id.
>< ; div class =" dark">
< tr>
< td class =" name"> Joe< / td>
< td class =" addr" ;> Elm< / td>
< td class =" email"> Something< / td>
< td class =" interest">更多< / td>
< / tr>
< tr class =" dark">
< td> Jane< / td>
< td> 999 999-9999< / td> ;
< td> Something Email< / td>
< td> Something Interests< / td>
< / tr>
< / div>
><div class="dark">
<tr>
<td class="name">Joe</td>
<td class="addr">Elm</td>
<td class="email">Something</td>
<td class="interest">More</td>
</tr>
<tr class="dark">
<td>Jane</td>
<td>999 999-9999</td>
<td>Something Email</td>
<td>Something Interests</td>
</tr>
</div>
div都不能成为tr的父元素，...
Neither can div be a parent element of tr, ...
I我觉得我找到了解决方案..
添加
span.dark tr {
background-color：＃ 00FFFF;
}
I think I found the solution..
Adding
span.dark tr {
background-color: #00FFFF;
}
....也不能跨越。
但是，tbody可以。
-
Johannes Koch
在te domine speravi;非永久性的东西。
（Te Deum，4美分。）
.... nor can span.
However, tbody can.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
这篇关于斑马表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
