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

Question

我有一个HTML表格，我在ios应用程序的UIWebView中显示。该表看起来很甜，但表格边框和或单元格边框与主表格边框重叠。

这是一个例子。

我正在使用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