使用 JPG 图像作为边框的 HTML 表格

发布于 2024-08-02 04:01:07 字数 3765 浏览 1 评论 0原文

我正在尝试创建一个用于电子邮件活动的“证书”。我们正在努力保持与 Outlook 2007 的兼容性，这限制了我们使用背景属性来仅加载单个图片以显示在文本后面。

我已将边框切成 4 块（左、上、右、下）并将它们放置在跨列和行中，但无法使它们正确对齐。基于此代码有什么建议吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Special Offer from Toyota/Scion of Clifton Park</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-style: italic;
}
.style4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.style8 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #666666;
}
.style9 {color: #666666}
.style10 {color: #000000}

}
-->
</style>
</head>

<body>
<table width="610" height="984" border="0" cellspacing="0" cellpadding="0">
  <tr></tr>


  <tr>
  <td width="74" rowspan="11"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" align="top" /></td>
  <td colspan="5"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="461" height="171" align="left" /></td>
  <td width="87" rowspan="11"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" align="bottom" /></td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
  </tr>

  <tr>
  <td colspan="5">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5">&nbsp;</td>
</tr>

  <tr>
  <td colspan="5">&nbsp;</td>
</tr>

  <tr>
  <td colspan="5">&nbsp;</td>
</tr>

  <tr>
  <td width="90">&nbsp;</td>
  <td width="90">&nbsp;</td>
  <td width="90">&nbsp;</td>
  <td width="90">&nbsp;</td>
  <td width="91">&nbsp;</td>
</tr>
  <tr>
  <td colspan="5"><div align="center">
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4">&nbsp;</p>
    <p class="style4"><span class="style8"><br/> 
      </span><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="466" height="63" align="top" /><br />
    </p>
    </div></td>
</tr>
</table>

</body>
</html>

原文

I'm trying to create a "certificate" for use in an email capmaign. We are trying to maintain compatability with Outlook 2007 and that limits us from using the background property to just load a single picture to display behind the text.

I've chopped my borders up in 4 pieces (left, top, right, bottom) and placed them in spanned columns and rows but cannot get them to line up properly. Any suggestions based on this code?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Special Offer from Toyota/Scion of Clifton Park</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-style: italic;
}
.style4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.style8 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #666666;
}
.style9 {color: #666666}
.style10 {color: #000000}

}
-->
</style>
</head>

<body>
<table width="610" height="984" border="0" cellspacing="0" cellpadding="0">
  <tr></tr>


  <tr>
  <td width="74" rowspan="11"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" align="top" /></td>
  <td colspan="5"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="461" height="171" align="left" /></td>
  <td width="87" rowspan="11"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" align="bottom" /></td>
</tr>
  <tr>
  <td colspan="5"> </td>
  </tr>

  <tr>
  <td colspan="5"> </td>
</tr>
  <tr>
  <td colspan="5"> </td>
</tr>
  <tr>
  <td colspan="5"> </td>
</tr>
  <tr>
  <td colspan="5"> </td>
</tr>
  <tr>
  <td colspan="5"> </td>
</tr>

  <tr>
  <td colspan="5"> </td>
</tr>

  <tr>
  <td colspan="5"> </td>
</tr>

  <tr>
  <td width="90"> </td>
  <td width="90"> </td>
  <td width="90"> </td>
  <td width="90"> </td>
  <td width="91"> </td>
</tr>
  <tr>
  <td colspan="5"><div align="center">
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"> </p>
    <p class="style4"><span class="style8"><br/> 
      </span><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="466" height="63" align="top" /><br />
    </p>
    </div></td>
</tr>
</table>

</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

染火枫林 2024-08-09 04:01:07

感谢您的所有建议 - 非常有帮助！如果你好奇的话，这就是我最终得到的结果。在浏览器中预览错误，但在接收端的电子邮件客户端中显示正确。我成功测试了 Gmail、Outlook 2000/2007、Yahoo（旧/新）、Hotmail、Thunderbird。

还在电子邮件中找到了 CSS 指南 http://www.campaignmonitor.com/css/
（如果发送到 Outlook 2007/2010 和 Gmail 客户端，则基本避免）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: #FFF;
    text-align: left;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body table tr td {
    font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
<table width="600" height="984" border="0" cellspacing="0" cellpadding="0" font-family: Arial, Helvetica, sans-serif;>    
<tr>
<td valign="top" width="74" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" /></td>

<td valign="top"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="459" height="171" /></td>

<td valign="top" width="71" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" /></td>
</tr> 
<tr>
<td>
  <p align="center"><font size="+1"> <strong>Special Introductory Maintenance Offer for:</strong></font></p>
  <p align="center"><em>Insert Name<br />Insert Vehicle<br />Insert Vin#<br />Insert Delivery Date</em></p>
  <p align="center"><strong>First 5,000 Miles / 6 Months <br /> Maintenance Service<br />$29.95<br /><font size="-4">(a $79.95 value)<br/><br/><font size="-1">to include:<br /></strong></p>
    <ul>
    <li><div align="left">Inspect and top off washer fluid, brake fluid, <br />
        power steering fluid, and coolant level</div></li>
    <li><div align="left"><font size="-1">Set tire pressures and rotate tires</div></li>
    <li><div align="left">Thorough tire inspection for abnormal wear or damage</div></li>
    <li><div align="left">Inspect wiper blades</div></li>
    <li><div align="left">Replace engine oil and filter</div></li>
    <li><div align="left">Reset maintenance indicator </div></li>
    </font>
    </ul>

  <p align="left"><font size="-1"><span>Toyota of Clifton Park would like to <strong>Thank You</strong> for  your vehicle purchase. We have taken time in caring for and preparing  your vehicle before your purchase and would like to continue that same  care throughout your ownership. I personally invite you to take  advantage of the above offer for your first full Toyota scheduled  maintenance in our Award winning service department. The initial "break  in" inspection is crucial to the safety and longevity of your new  investment.<br /><br />
    Our call center will be following up with you as a reminder when the time gets close. If you have any questions or concerns please don't  hesitate to call the service department at 518-664-4444. Any one of our associates can answer your questions. We truly appreciate your business and look forward to seeing you soon.</span></font></p>

<p align="center"><span>Thank You, <br />Jason Halliday, Service Manager<br />Toyota / Scion of Clifton Park<br /><font size="-3"><em><br /><br />Certificate expires 6 months from delivery date or <br />5,000 miles, whichever comes first.<br />Applicable sales tax not included.<br />Certificate not transferable, valid only for the above customer and vehicle.<br /> NC OPCODE FSCERT<br /></em></font></span></p>
</td>     
</tr>
<tr>
<td valign="bottom"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="459" height="63"/></td>     
</tr>
</table>
</body>
</html>

Thanks for all your suggestions - GREAT HELP! Here's what I ended up with if you are curious. Previews wrong in browsers, but displays correctly in email clients on the receiving end. I tested Gmail, Outlook 2000/2007, Yahoo (old/new), Hotmail, Thunderbird successfully.

Also found this guide to CSS in emails http://www.campaignmonitor.com/css/
(basically avoid it if sending to Outlook 2007/2010 and Gmail clients)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: #FFF;
    text-align: left;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body table tr td {
    font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
<table width="600" height="984" border="0" cellspacing="0" cellpadding="0" font-family: Arial, Helvetica, sans-serif;>    
<tr>
<td valign="top" width="74" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" /></td>

<td valign="top"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="459" height="171" /></td>

<td valign="top" width="71" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" /></td>
</tr> 
<tr>
<td>
  <p align="center"><font size="+1"> <strong>Special Introductory Maintenance Offer for:</strong></font></p>
  <p align="center"><em>Insert Name<br />Insert Vehicle<br />Insert Vin#<br />Insert Delivery Date</em></p>
  <p align="center"><strong>First 5,000 Miles / 6 Months <br /> Maintenance Service<br />$29.95<br /><font size="-4">(a $79.95 value)<br/><br/><font size="-1">to include:<br /></strong></p>
    <ul>
    <li><div align="left">Inspect and top off washer fluid, brake fluid, <br />
        power steering fluid, and coolant level</div></li>
    <li><div align="left"><font size="-1">Set tire pressures and rotate tires</div></li>
    <li><div align="left">Thorough tire inspection for abnormal wear or damage</div></li>
    <li><div align="left">Inspect wiper blades</div></li>
    <li><div align="left">Replace engine oil and filter</div></li>
    <li><div align="left">Reset maintenance indicator </div></li>
    </font>
    </ul>

  <p align="left"><font size="-1"><span>Toyota of Clifton Park would like to <strong>Thank You</strong> for  your vehicle purchase. We have taken time in caring for and preparing  your vehicle before your purchase and would like to continue that same  care throughout your ownership. I personally invite you to take  advantage of the above offer for your first full Toyota scheduled  maintenance in our Award winning service department. The initial "break  in" inspection is crucial to the safety and longevity of your new  investment.<br /><br />
    Our call center will be following up with you as a reminder when the time gets close. If you have any questions or concerns please don't  hesitate to call the service department at 518-664-4444. Any one of our associates can answer your questions. We truly appreciate your business and look forward to seeing you soon.</span></font></p>

<p align="center"><span>Thank You, <br />Jason Halliday, Service Manager<br />Toyota / Scion of Clifton Park<br /><font size="-3"><em><br /><br />Certificate expires 6 months from delivery date or <br />5,000 miles, whichever comes first.<br />Applicable sales tax not included.<br />Certificate not transferable, valid only for the above customer and vehicle.<br /> NC OPCODE FSCERT<br /></em></font></span></p>
</td>     
</tr>
<tr>
<td valign="bottom"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="459" height="63"/></td>     
</tr>
</table>
</body>
</html>

回复收藏 0 原文

要走就滚别墨迹 2024-08-09 04:01:07

您可以通过将 valign="top" 和 valign="bottom" 添加到表格顶部和底部的中心单元格来完成此操作。

像这样：

<tr>
  <td width="74" rowspan="11"><img src="left_image2.jpg"  width="70" height="984" align="top" /></td>
  <td colspan="5" valign="top"><img src="top_image3.jpg" width="461" height="171" align="left" /></td>
  <td width="87" rowspan="11" ><img src="http:right_image2.jpg" border=0  width="71" height="984" align="bottom" /></td>
</tr>
......
<tr  valign="bottom">

You can do it by adding valign="top" and valign="bottom" to the center cells in the top and bottom for the table.

like so:

<tr>
  <td width="74" rowspan="11"><img src="left_image2.jpg"  width="70" height="984" align="top" /></td>
  <td colspan="5" valign="top"><img src="top_image3.jpg" width="461" height="171" align="left" /></td>
  <td width="87" rowspan="11" ><img src="http:right_image2.jpg" border=0  width="71" height="984" align="bottom" /></td>
</tr>
......
<tr  valign="bottom">

回复收藏 0 原文

最后的乘客 2024-08-09 04:01:07

所有中间列单元格的高度都是可变的（不是固定的），因此浏览器只会尝试将它们调整到它认为最好的高度。

您需要使用 style 属性来修复它们的高度，如下所示：

<td style="height: 171px;">

这适用于包含顶部图像的单元格，因为图像的高度为 171px。

另外：中间需要9排吗？或者你尝试过这样来定位边界吗？

编辑：或者Re0sless所说的。 ;D

All of your middle column cells have variable heights (not fixed) and so the browser will just try to adjust them to what it thinks is best.

You need to fix their heights by using the style attribute like so:

<td style="height: 171px;">

That would be for the cell containing the top image as the image has a height of 171px.

Also: Do you need 9 rows in the center? Or did you try that to position the borders?

Edit: Or what Re0sless said. ;D

回复收藏 0 原文

念三年u 2024-08-09 04:01:07

...有几种方法可以修复它，其中一种（如果它可以在 Outlook 中工作并在所有其他邮件代理中显示）是将顶部和底部边框图像绝对定位在单元格中。

其次，我也许会重组表格。使顶部和底部边框跨越所有列，就好像它们从顶部和底部覆盖表格并从那里取出它一样。

回复收藏 0 原文

梦断已成空 2024-08-09 04:01:07

我的建议：

将图像宽度设置为适当的值（顶部和底部均为 459 像素宽）。
将表宽度设置为总值 (459 + 71 + 71 = 600)。
为底部图像创建单独的一行，并将所有内容放入一个表格单元格中。如果需要，您可以在里面嵌套更多桌子。

<table width="600" height="984" border="0" cellspacing="0" cellpadding="0">
    <tr>
       <td width="74" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" align="top" /></td>
       <td><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="459" height="171" align="left" /></td>
       <td width="71" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" align="bottom" /></td>
     </tr>
     <tr>
        <td>Put all your content in here.</td>
     </tr>
     <tr>
        <td valign="bottom"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="459" height="63" align="top" /></td>
     </tr>
</table>

My suggestions:

Set the image widths to the proper values (top and bottom are 459px wide).
Set the table width to the total value (459 + 71 + 71 = 600).
Create a separate row for the bottom image, and put all of your content in one table cell. You can nest more tables inside if you need to.

<table width="600" height="984" border="0" cellspacing="0" cellpadding="0">
    <tr>
       <td width="74" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" align="top" /></td>
       <td><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="459" height="171" align="left" /></td>
       <td width="71" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" align="bottom" /></td>
     </tr>
     <tr>
        <td>Put all your content in here.</td>
     </tr>
     <tr>
        <td valign="bottom"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="459" height="63" align="top" /></td>
     </tr>
</table>

回复收藏 0 原文

琴流音 2024-08-09 04:01:07

将顶部中间单元格设置为垂直对齐顶部：
.... top_image3.jpg ....

2.
剪切一个新图像用于底部，其中包括整个表格的左、中、右列，并将其放入 colspan="7" 的单元格中

回复收藏 0 原文

诗笺 2024-08-09 04:01:07

确保您重置所有CSS，以便在您之前将边距和填充设置为0应用任何样式。

回复收藏 0 原文

她如夕阳 2024-08-09 04:01:07

在围绕这个问题寻找我自己的“使用图像作为边框的 HTML 表格”的要求后，我找到了一个在其他地方没有看到的解决方案。它在tbody、tr和td上使用单独的背景来达到预期的效果。这是 IE8 (CSS2) 兼容的解决方案：

table.table tbody {
      background-color: #dddddd;
}

table.table tbody tr td, table.table thead tr th {
    background-image: url('some-image.png');
    background-position: right;
    background-repeat: repeat-y;
}

table.table tbody tr {
    background-image: url('some-image.png');
    background-position: top;
    background-repeat: repeat-x;
}

CSS3 中的解决方案是使用多个背景：

table.table tbody tr td, table.table thead tr th {
      background-image: url('some-image.png'), url('some-image.png');
      background-position: top, right;
      background-repeat: repeat-x, repeat-y;
}

希望这对将来的人有帮助。

After hunting around on this question for my own requirements of "HTML Tables using images as borders" I came to a solution that I did not see elsewhere. It uses a separate background on the tbody, tr and td to achieve the desired effect. Here is the IE8 (CSS2) compatible solution:

table.table tbody {
      background-color: #dddddd;
}

table.table tbody tr td, table.table thead tr th {
    background-image: url('some-image.png');
    background-position: right;
    background-repeat: repeat-y;
}

table.table tbody tr {
    background-image: url('some-image.png');
    background-position: top;
    background-repeat: repeat-x;
}

The solution in CSS3 is to use multiple backgrounds:

table.table tbody tr td, table.table thead tr th {
      background-image: url('some-image.png'), url('some-image.png');
      background-position: top, right;
      background-repeat: repeat-x, repeat-y;
}

Hope this helps someone in the future.

回复收藏 0 原文

~没有更多了~