我正在创建一个页面，其中想要列出许多项目。为了使其更具可读性，我想每隔一项更改一次背景颜色。我希望背景颜色从左到右一直延伸，就像浏览器窗口一样。
目前包含这些元素的表格的宽度为 950px，因此 td 颜色仅为 950px。如何在保持文本 950px 宽度的同时使其更宽？
我正在处理的页面是 http://www.spanish-bookworld.com/delete-footer.html
您设想的解决方案几乎是不可能的。
您需要使表格达到页面的整个宽度，然后将每个表格单元格的内容包装在宽度为 950px 且在单元格内水平居中的包装器中。
为此布局使用表格是一个糟糕的选择。每个表行都是一个独立的单元，可以标记为带有子元素的块级元素 （div）。 大型表的加载和呈现速度往往较慢，因此请避免使用它们，除非显示表格数据。
正如Marc和Fez指出的那样，表格实际上应该只用于数据显示。
我建议你使用div 元素来实现你的目标，就像这样：
<body>
<div>Some Text</div>
<div class="coloured">Some Text</div>
<div>Some Text</div>
<div class="coloured">Some Text</div>
</body>
看看这个JFiddle。
这是一个基于<div>的解决方案，它也利用了 CSS3 选择器。
在过去，表格用于布局，但为此目的它们非常乏味和脆弱。正如在其他响应中所说的那样，表旨在显示数据。
.HTML
将其直接放在<body>
<div class="zebra">
<div class="zebra-item">
<div class="zebra-left">
Some text
</div>
<div class="zebra-right">
Some image
</div>
</div>
</div>
<div class="zebra">
<div class="zebra-item">
<div class="zebra-left">
Some image
</div>
<div class="zebra-right">
Some text
</div>
</div>
</div>
.CSS
请注意此处的.zebra:nth-of-type(2n)选择器。这样可以确保所有其他元素都具有灰色背景。无需插入额外的类。
.zebra:nth-of-type(2n) {
background-color: #efefef;
}
.zebra-item {
width:400px;
clear:left;
margin: 0px auto;
}
.zebra-left, .zebra-right {
width: 50%;
float:left;
}
这是jsfiddle。