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

【问题标题】：HTML table borders being overlapped by cell bordersHTML 表格边框与单元格边框重叠
【发布时间】：2013-12-03 00:51:29
【问题描述】：

我有一个 HTML 表格，我在我的 ios 应用程序的 UIWebView 中显示。表格看起来很漂亮，但表格边框和<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>

【问题讨论】：

标签： html css objective-c html-table

【解决方案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

【讨论】：