Question

我试图打印圆角桌。在这种情况下，TD必须是边界的。那是我的代码：

table {
    /*border-collapse: collapse;*/
    border-spacing: 0;
}

table tr td {
        border: 1px solid #333;
        border-bottom: 0;
        border-right: 0;
        padding-left: 4px;
        padding-right: 4px;
        line-height: 28px;
    }

        table tr td:last-child {
            border-right: 1px solid #000;
        }

    table tr:last-child td {
        border-bottom: 1px solid #000;
    }

    table tr:first-child td:last-child {
        -webkit-border-radius: 0 4px 0 0;
        -moz-border-radius: 0 4px 0 0;
        border-radius: 0 4px 0 0;
        border-width: 1px;
    }

HTML：

<table>
    <tr>
       <td>adsfasdfasdfasfasd</td>
        <td>adsfasdfasdfasfasd</td>
    </tr>
 </table>

http://jsfiddle.net/gdkgkgwL/2/

所有浏览器的输出都很好：

当我在IE中打印页面时很好，但不在Chrome中：

我该怎么做才能让它在Chrome中运行？

Answer 1

这似乎是一个已经存在一段时间的Chrome错误：

重现问题的步骤：


创建HTML Block元素（例如Hello World）

使用至少1个border-radius设置块元素的样式，并使相邻边缺少边框（例如Hello World）

在Google Chrome中打开此页面并查看打印预览或打印

请注意额外的粗边框

（https://code.google.com/p/chromium/issues/detail?id=175539。）

如果边框不共享颜色或宽度，则似乎会出现此问题。要修复您的示例，请进行以下更改：

在table tr td:last-child将border-right: 1px solid #000;更改为border-right: 1px solid #333;
在table tr:last-child td将border-bottom: 1px solid #000;更改为border-bottom: 1px solid #333;

这可确保所有方面都相同，从而阻止错误发生。

＆＃13;

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table {
  /*border-collapse: collapse;*/
  border-spacing: 0;
}
table tr td {
  border: 1px solid #333;
  border-bottom: 0;
  border-right: 0;
  padding-left: 4px;
  padding-right: 4px;
  line-height: 28px;
}
table tr td:last-child {
  border-right: 1px solid #333;
}
table tr:last-child td {
  border-bottom: 1px solid #333;
}
table tr:first-child td:last-child {
  -webkit-border-radius: 0 4px 0 0;
  -moz-border-radius: 0 4px 0 0;
  border-radius: 0 4px 0 0;
  border-width: 1px;
}

＆＃13;

<table>
  <tr>
    <td>adsfasdfasdfasfasd</td>
    <td>adsfasdfasdfasfasd</td>
  </tr>
</table>

＆＃13;

JS小提琴： http://jsfiddle.net/3kqk327q/

在Chrome中打印圆角表格单元格

1 个答案: