重叠表格元素左右边框

Posted 2023-03-05

【中文标题】重叠表格元素左右边框

【英文标题】：Overlapping table element left and right border

【发布时间】：2013-09-22 01:09:33

【问题描述】：

我想将表格第一行中的每个元素设置为具有某种颜色的左边框和某种颜色的右边框。不幸的是，看起来相邻表格单元格的边框是重叠的，我只显示左边框颜色。左边边框应该是浅灰色，右边是深灰色。

这是我生成表格的 html。 （HTML在cherrypy中生成）

<th id="tbl_head" colspan='4'>%s</th>
    <tr>
        <td id="colhead">Track</td>
        <td id="colhead">Artist</td>
        <td id="colhead_time">Time</td>
        <td id="colhead">Album</td>
    </tr>

这是我的 CSS：

table 
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    border-collapse: collapse;


td 
    padding: 3px;


#colhead 
    font-weight: bold;
    text-align: left;
    background-color: #989898;
    color: #000000;

    border-left-color:   #aeaeae;
    border-left-style: solid;
    border-left-width: 2px;

    border-right-color: #6c6c6c;    
    border-right-style: solid;
    border-right-width: 1px;



#colhead_time 
    font-weight: bold;
    text-align: right;
    background-color: #989898;
    color: #000000;

    border-left-color:   #aeaeae;
    border-left-style: solid;
    border-left-width: 2px;

    border-right-color: #6c6c6c;    
    border-right-style: solid;
    border-right-width: 1px;

【问题讨论】：

试过没有border-collapse？此外，您的 border-right-color 没有有效值，正如下面 user2788058 的回答中指出的那样。

删除 border-collapse 后，我可以看到深灰色和浅灰色，但我看到一条可怕的白线将表格中的所有单元格分开

【参考方案1】：

在您的table CSS 上使用以下属性。

border-collapse: separate;
border-spacing: 0px;

table 
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  margin-left: auto;
  margin-right: auto;
  border-width: 1px;
  border-collapse: separate;
  border-spacing: 0px;

td 
  padding: 3px;

#colhead 
  font-weight: bold;
  text-align: left;
  background-color: #989898;
  color: #000000;
  border-left-color: red;
  border-left-style: solid;
  border-left-width: 2px;
  border-right-color: blue;
  border-right-style: solid;
  border-right-width: 1px;

#colhead_time 
  font-weight: bold;
  text-align: right;
  background-color: #989898;
  color: #000000;
  border-left-color: red;
  border-left-style: solid;
  border-left-width: 2px;
  border-right-color: blue;
  border-right-style: solid;
  border-right-width: 1px;

<table>
  <th id="tbl_head" colspan='4'>%s</th>
  <tr>
    <td id="colhead">Track</td>
    <td id="colhead">Artist</td>
    <td id="colhead_time">Time</td>
    <td id="colhead">Album</td>
  </tr>
</table>

Fiddle Demo

【讨论】：

解决了 pdf 中的 td 边框问题。 td 边框变得大于表格宽度。谢谢！

@varun：欢迎朋友。很高兴注意到一个旧答案很有帮助:)

【参考方案2】：

在您的 CSS 中，您为边框颜色属性添加了错误的值。 你把它写成：

border-right-color: 1px solid #6c6c6c; 

应该是这样的：

border-right-color: #6c6c6c; 

【讨论】：

请在内联代码块的前后添加一个`，以将它们格式化为代码。对于多行代码，请使用按钮栏中的 按钮。

【参考方案3】：

这是你使用border-collapse: collapse; 使用border-spacing:0;border-collapse:no-collapse; 代替。

【讨论】：

边框折叠没有“无折叠”值。我认为你“分开”developer.mozilla.org/en-US/docs/Web/CSS/border-collapse