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