html - 在表格中添加对 Angular 线和虚线

Question

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

像这样:

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 具有单元格的 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");
}

带有 CSS background-image 属性的 JSFiddle:https://jsfiddle.net/qvoLLky9/3/

---

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