HTML 表格边框与单元格边框重叠

Question

我在 iOS 应用程序的 UIWebView 中显示了一个 HTML 表格。表格看起来不错，但是表格边框和 <tr>或单元格边框与主表格边框重叠。

这是一个例子:

我正在使用 CSS 设置这些边框的样式并将其作为类添加到 html 中。这就是我的样式表的样子。

<style type='text/css'>table.tdat{border-collapse:collapse;border-color:#000000; border-style:solid; border-width:1px;}td{padding:2px; font-family:Helvetica; color:black; font-size:12pt; height:15pt; text-align:right; vertical-align:top; white-space:nowrap;}tr.cta td{font-family:Arial; color:black; font-size:12pt; height:15pt; text-align:right;vertical-align:top;white-space:nowrap;border:1px solid #eeeeee;}tr.top td { border-top: thin solid black; }tr.bottom td { border-bottom: thin solid black; }tr.ax td:first-child { border-left: thin solid black; border-right: thin solid black;} </style>

这是来自 NSString 并且我不是 100% 确定 css 格式，因为我只在制作 iOS 应用程序时使用过它。

然后我像这样使用 CSS:

<table frame="box" class="tdat">
 <tr class="cta top ax">
  <td>Position:</td>
  <td width="20">1</td>
  <td width="20">2</td>
  <td width="20">3</td>
  <td width="20">4</td>
  <td width="20">5</td>
  <td width="20">6</td>
  <td width="20">7</td>
  <td width="20">8</td>
 </tr>
 <tr class="cta bottom ax">
  <td>Axis A:</td>
  <td>4</td>
  <td>3</td>
  <td>2</td>
  <td>2</td>
  <td>1</td>
  <td>3</td>
  <td>3</td>
  <td>2</td>
</table>

Answer 1

这是因为您要在 td 的顶部和底部设置边框，这意味着侧边框要向上增加一个额外的像素侧边框显示在顶部和底部边框的“顶部”它似乎。您可以通过一些调整来解决此问题。我会将 cellspacing="0" 添加到表格 HTML 并删除 border-collapse: collapse;。然后相应地设置边框样式。

table.tdat{
  /*border-collapse:collapse; remove */
  border: 1px solid black;
}
td{
  padding:2px; 
  font-family:Helvetica; 
  color:black; 
  font-size:12pt; 
  height:15pt; 
  text-align:right; 
  vertical-align:top;
  white-space:nowrap;
}
tr.cta td{
  font-family:Arial; 
  color:black; 
  font-size:12pt; 
  height:15pt; 
  text-align:right;
  vertical-align:top;
  white-space:nowrap;
  border:1px solid #eeeeee;
  border-top: 0; /* ADD */
  border-bottom: 0; /* ADD */
}
/*tr.top td {
  border-top: thin solid black; REMOVE
}*/
tr.bottom td { 
  /*border-bottom: thin solid black; REMOVE*/
  border-top: 1px solid #eee;
}  
tr.ax td:first-child { 
  /*border-left: thin solid black; REMOVE */
  border-right: thin solid black;
  border-top-color: black;
}

http://jsbin.com/IQuYIBI/1/edit