如何让 td 背景颜色在 html 和 css 中从左到右拉伸，而不仅仅是表格宽度？答案

【问题标题】：How do I get a td background color to stretch from left to right, not just the table width, in html & css?如何让 td 背景颜色在 html 和 css 中从左到右拉伸，而不仅仅是表格宽度？
【发布时间】：2013-09-09 21:58:51
【问题描述】：

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

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

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

【问题讨论】：

你真的在写表格布局吗？ learnlayout.com

标签： css html layout html-table

【解决方案1】：

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

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

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

【讨论】：

摆脱桌子显然是解决方案。不幸的是，我目前对 CSS 的了解还不够好。我很想找人来帮助我，显然是收费的。
发布的其他一些解决方案展示了一种非表格方法来实现等效布局，因此它们可以为您提供一个起点，非常值得仔细查看。
我实际处理的页面比我上面提到的要复杂得多。目前，我将背景颜色设置为 950 像素宽。然后我会寻找一个 CSS 编码器来帮助我重写页面以摆脱所有表格。

【解决方案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。

【讨论】：

【解决方案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。

【讨论】：