0

我正在创建一个想要列出许多项目的页面。为了使其更具可读性，我想更改每隔一个项目的背景颜色。我希望背景颜色从左到右一直延伸，就像浏览器窗口一样。

目前包含这些元素的表格的宽度为 950px，因此 td 颜色只有 950px。如何使其更宽，同时保持文本的 950px 宽度？

我正在处理的页面是http://www.spanish-bookworld.com/delete-footer.html

4

3 回答 3

0

您设想的解决方案几乎是不可能的。

您需要使表格成为页面的整个宽度，然后将每个表格单元格的内容包装在一个宽度为 950 像素且在单元格内水平居中的包装器中。

为这种布局使用表格是一个糟糕的选择。每个表格行都是一个独立的单元，可以标记为带有子元素的块级元素 (div)。大型表格往往加载和呈现速度更慢，因此除非您显示表格数据，否则请避免使用它们。

于 2013-09-09T11:27:35.743 回答
0

正如 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。

于 2013-09-09T11:32:29.017 回答
0

这是一个<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。

于 2013-09-09T13:21:37.133 回答