css - 在 Chrome 中打印圆 Angular 表格单元格

Question

我正在尝试打印圆 Angular table 。在这种情况下，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 错误:

Steps to reproduce the problem:

1. Create an HTML Block element (e.g. Hello World)
2. Style the block element with at-least 1 border-radius with an adjacent side that is missing a border (e.g. Hello World)
3. Open this page in Google Chrome and view print preview or print
4. Notice that extra thick border-top

( 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;

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

/* 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;
}

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

JS fiddle : http://jsfiddle.net/3kqk327q/