HTML表格如何设置表格背景色为线性渐变（实例演示）-html教程-PHP中文网

html表格渐变背景必须设在上并用background-image显式声明，配合background-size、background-clip和background-origin解决尺寸、裁剪与对齐问题，同时规避兼容性陷阱。

html表格如何设置表格背景色为线性渐变（实例演示）

表格本身不支持直接设渐变背景，background-color只能填单色，linear-gradient()必须靠 background-image 显式声明，且必须落在 <td> 上——写在 <code><tr> 或 <code><table> 上，90% 情况下会失效或渲染错乱。 <h3>为什么给 <code><table> 加 <code>linear-gradient() 没效果

常见错误是直接写 table { background: linear-gradient(...); }。问题有三：

<table> 默认 <code>border-collapse: collapse，内容撑不开高度，渐变只渲染在几像素高的“空行”里
表格没有显式 height 或 min-height，浏览器按内容自动计算高度，往往远小于视觉预期
background 简写会隐式重置 background-repeat 和 background-size，导致渐变被平铺成条纹或只显示一角

正确做法：渐变必须写在 `<td> 上并配齐三属性 <p>把渐变从 <code><tr> 下沉到每个 <code><td>，才能规避浏览器对 <code><tr> 渲染行为的差异（尤其 IE10–11、旧 Safari）。 <ul> <li>用 <code>background-image` 而非 `background` 简写，避免覆盖已有设置
加 `background-size: 200% 200%` + `background-position: center`，让渐变居中拉伸，填满不定宽高的单元格

必须设 `background-clip: padding-box`，否则渐变会画到 border 外；如果单元格有 `padding`，再加 `background-origin: padding-box` 对齐起点

示例 CSS：

td {
  background-image: linear-gradient(135deg, #ff9a9e, #fad0c4);
  background-size: 200% 200%;
  background-position: center;
  background-clip: padding-box;
  background-origin: padding-box;
  padding: 12px;
}

兼容性坑：IE10 和旧 Safari 必须加前缀和降级色

IE10 不识别标准 linear-gradient()，旧版 Safari（iOS 9 及更早）要求 -webkit-linear-gradient() 前缀，且不支持 rgba() 透明度。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

前缀顺序不能反：先写 -webkit-，再写 -ms-（IE10），最后写标准版
降级色必须单独一行写在最前面，比如 background-color: #ff9a9e;，IE9 及更早会 fallback 到它
若要用半透效果，别用 rgba(255,0,0,0.5)，改用 hsla(0,100%,50%,0.5) 或换浅色逼近

完整兼容写法：

td {
  background-color: #ff9a9e;
  background-image: -webkit-linear-gradient(135deg, #ff9a9e, #fad0c4);
  background-image: -ms-linear-gradient(135deg, #ff9a9e, #fad0c4);
  background-image: linear-gradient(135deg, #ff9a9e, #fad0c4);
}