如何在html和css中获得td背景颜色从左到右伸展，而不仅仅是表格宽度？

Question

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

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

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

Answer 1

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

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

使用表格进行此布局是一个糟糕的选择。 每个表行都是一个独立的单元，可以将其标记为带有子元素的块级元素（div）。 大表的加载和渲染速度往往较慢，因此除非显示列表数据，否则应避免使用它们。

Answer 2

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

Answer 3

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

如何在html和css中获得td背景颜色从左到右伸展，而不仅仅是表格宽度？

问题描述

3 个解决方案

解决方案1
0 已采纳 2013-09-09 11:27:35

解决方案2
0 2013-09-09 11:32:29

解决方案3
0 2013-09-09 13:21:37

如何在html和css中获得td背景颜色从左到右伸展，而不仅仅是表格宽​​度？

问题描述

3 个解决方案

解决方案1 0 已采纳 2013-09-09 11:27:35

解决方案2 0 2013-09-09 11:32:29

解决方案3 0 2013-09-09 13:21:37

如何在html和css中获得td背景颜色从左到右伸展，而不仅仅是表格宽度？

解决方案1
0 已采纳 2013-09-09 11:27:35

解决方案2
0 2013-09-09 11:32:29

解决方案3
0 2013-09-09 13:21:37