重叠的表格元素左右边框问题

Question

重叠的表格元素左右边框问题

13

我想将表格的第一行中的每个元素设置为特定颜色的左边框和右边框。不幸的是，相邻表格单元格的边框重叠在一起，我只能看到左侧边框颜色。左边框应该是浅灰色，右边是深灰色。

以下是生成表格的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;

}

- natsuki_2002

1

尝试过没有使用 border-collapse 吗？另外，如 user2788058 在下面的回答中指出的那样，您的 border-right-color 没有有效的值。 - Harry

移除 border-collapse 属性，我可以看到深灰色和浅灰色，但是在表格中所有单元格之间会出现一条可怕的白线。 - natsuki_2002

3个回答

3

在你的CSS中，你为border-color属性添加了错误的值。你写成：

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

应该是这样的：

border-right-color: #6c6c6c;

- kp7860

请在行内代码块的前后添加 符号以格式化为代码。对于多行代码，请使用按钮栏中的{}` 按钮。 - Harry

2

你使用了 border-collapse: collapse;，建议改为 border-spacing:0;border-collapse:no-collapse;。

- darcher

1

border-collapse 没有“no-collapse”值。我认为你想说的是“separate”。https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-collapse - Lorenzo Gangi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

使用以下属性来设置你的 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