4

这是我当前代码的示例：jsfiddle

问题是，表格标题和正文之间的深灰色线被单元格的右边距切割。我想在列之间有一个边界，在标题和正文表之间有一个不间断的边距。

这是HTML：

<table id="prazo">
  <thead>
    <tr>
      <th>month</th>
      <th> val </th>
      <th> val </th>
      <th> val </th>
      <th> val </th>
      <th> val </th>
      <th>val</th>
    </tr>
  </thead>
  <tbody>
    <tr class="srow">
      <td>January</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
    <tr class="srow">
      <td>January</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
  </tbody>
</table>

和CSS：

#prazo {
    font-family: 'Bitter', serif;
    width: 100%;
    border-spacing:0;
    border-collapse:collapse;
}

#prazo thead tr{
    height: 50px;
    background-color: #ffffff;
    font-weight:bold;
    border-bottom: 3px solid #7d7d7d !important;
}



#prazo td, th {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    height: 30px;
    background-color: #ffffff;
    border-right: 3px solid #f6f6f6;
}

.srow td {
    background-color: #f2f2f2 !important;
}

#prazo th {
    font-size: 16px;
}
4

5 回答 5

1

我能想到的最好的方法是：将较暗边框的宽度增加到 4px ( border-right: 4px solid #7d7d7d;)
或
将另一个边框的宽度减小到 2px ( border-right: 2px solid #f6f6f6;)。

看到这个jsFiddle

不是最好的答案，但它确实为您提供了一个坚实的深色边框，并在 th 单元格之间保持较浅的边框。

于 2013-11-06T12:25:52.277 回答
0

您只需要为每个标题单元格提供底部边框。

请添加以下样式：


#prazo th {
    font-size: 16px;
    border-bottom: 3px solid #7d7d7d !important;
}

请在此处查看demo

于 2013-11-06T12:15:15.727 回答
0 
#prazo td, th {
    background-color: #FFFFFF;
    border-right: 3px solid #F6F6F6;
    font-size: 14px;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

从上面的 css 中删除以下行

border-right: 3px solid #F6F6F6;
于 2013-11-06T12:19:12.007 回答
0

如何将您的最终样式更改为：

#prazo th {
    font-size: 16px;
    border-bottom: 3px solid #7d7d7d !important;
    border-right:0 !important;
}

并向上移除底部边框

于 2013-11-06T12:24:40.307 回答
0

对于那些好奇的人来说，这里是一个很好的方法。

我使用了马丁解决方案:)

于 2013-11-06T16:26:45.247 回答