http://jsfiddle.net/cGV47/2/

正如你所看到的，我使用的是border-collapse：collapse，我指定了background：对于< tr>和< th>子元素，但是对于每个表格单元重复左侧的红色渐变。我已经尝试将背景应用到< tr>而且，与现在看到的结果相同。

要查看代码而不去jsfiddle，这里是：

HTML

<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>un</td>
            <td>deux</td>
            <td>trois</td>
            <td>quatre</td>
        </tr>
    </tbody>
</table>

CSS

* {margin:0;padding:0;border:0;border-collapse:collapse;}
table { width:100%; }
thead { background: -webkit-linear-gradient(left,rgba(222,22,1) 0%,222,0) 20%,0) 80%,1) 100%); }
thead tr,thead th { background:transparent; }