11

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

在此处输入图像描述

这是我生成表格的 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;

}
4

3 回答 3

23

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>

小提琴演示

于 2013-09-17T14:39:01.543 回答
3

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

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

虽然它应该是：

border-right-color: #6c6c6c;
于 2013-09-17T14:29:09.017 回答
2

而是你的使用border-collapse: collapse;用途border-spacing:0;border-collapse:no-collapse;。

于 2013-09-17T14:43:12.027 回答