在 table 中添加对角线和虚线

Question

我正在尝试使用 HTML / [= 格式化在 OpenOffice Calc 中创建的 table 18=]CSS。我遇到了一些运行问题，但其中一个较大的问题是如何像本示例那样在单元格内添加虚线指南？

像这样：

Answer 1

有两种方法可以解决虚线指引线的问题：

方法 #1：使用 `background` 属性.

<table cellpadding="0" cellspacing="0" border="1">
    <tr>
      <td width="50" height="50" align="center" background="http://www.htmliseasy.com/table_tutor/myback.gif">1</td>
      <td width="50" height="50" align="center" background="http://www.htmliseasy.com/table_tutor/myback.gif">2</td>
      <td width="50" height="50" align="center" background="http://www.htmliseasy.com/table_tutor/myback.gif">3</td>
    </tr>
</table>

JSFiddle with background 属性单元格：https://jsfiddle.net/qvoLLky9/2/

方法 #2：使用 CSS 代替单元格的 `background` 属性：

<table cellpadding="0" cellspacing="0" border="1">
     <tr>
       <td width="50" height="50" align="center" class="guidelines">1</td>
       <td width="50" height="50" align="center" class="guidelines">2</td>
       <td width="50" height="50" align="center" class="guidelines">3</td>
     </tr>
</table>

.guidelines{
    background-image:url("http://www.htmliseasy.com/table_tutor/myback.gif");
}

JSFiddle 与 CSS background-image 属性: https://jsfiddle.net/qvoLLky9/3/

NOTE: Replace my image (myback.gif) by yours (guidelines)

在 table 中添加对角线和虚线

Adding diagonal strikes and dotted rules to a table

html

css

html-table

方法 #1：使用 `background` 属性.

方法 #2：使用 CSS 代替单元格的 `background` 属性：

在 table 中添加对角线和虚线

Adding diagonal strikes and dotted rules to a table

html

css

html-table

方法 #1：使用 background 属性.

方法 #2：使用 CSS 代替单元格的 background 属性：

方法 #1：使用 `background` 属性.

方法 #2：使用 CSS 代替单元格的 `background` 属性：