html – 表行边框 – 半输入,半输出

我正在尝试使用我认为将要实现的相当简单的样式来设置表格但是已经遇到了一个小问题.

该表将在每行的左侧显示一个彩色指示器,因此我使用的是border-left：5px solid red;添加它.然而,虽然边界适用 – 其中一半在行内,一半在外面.我试过添加border-collapse：崩溃无济于事,我也使用box-sizing：border-box但仍然有同样的问题.

最后,我还尝试将边框添加到第一个子单元格(td),但出现了同样的问题.

我已经建立了一个正在发生的事情的例子 – 我已经放入一个超大的边框来强调这个问题：

http://www.cssdesk.com/TVa67

有没有人遇到这个或有任何解决方案？

body {
  background: blue;
}
table {
  border-collapse: collapse;
  box-sizing: border-box;
  table-layout: fixed;
  width: 100%;
}
th,td {
  background-color: #fff;
  padding: 10px 15px 8px;
}
th {
  border-bottom: 1px solid blue;
  font-weight: normal;
  text-align: left;
}
td {
  border-bottom: 1px solid gray;
}
tr.low {
  border-left: 25px solid red;
}

最佳答案


However,although the border applies – half of it is inside the row

  and half outside

此行为是预期的,并按照规范.请参阅：http://www.w3.org/TR/CSS2/tables.html#collapsing-borders,其中说：


Borders are centered on the grid lines between the cells…

它还说明了带有description的图表.


Has anyone run into this before or have any solutions?

是的,它可以很容易地在这个小提琴中展示：http://jsfiddle.net/abhitalks/xs7L9wn1/1/和下面的片段：

* { box-sizing: border-box; }
table {
    border-collapse: collapse;
    border: 1px solid gray;
    table-layout: fixed; width: 70%; 
    margin: 0 auto;
}
th,td {
    border: 1px solid gray;
    padding: 6px;
    text-align: center;
}
tbody > tr:nth-child(1) > td:first-child { border-left: 16px solid red; }
tbody > tr:nth-child(2) > td:first-child { border-left: 8px solid green; }
tbody > tr:nth-child(3) > td:first-child { border-left: 24px solid blue; }

tbody > tr:nth-child(1) > td:last-child { border-left: 16px solid red; }
tbody > tr:nth-child(2) > td:last-child { border-left: 8px solid green; }
tbody > tr:nth-child(3) > td:last-child { border-left: 24px solid blue; }

解：
只需为所有行添加相同宽度的透明边框即可.这样边框宽度将是相同的,它将整齐地对齐. (更新：向第一列添加了一个白色边框,以隐藏突出显示的单元格上的悬挂边框.正如您的评论所指出的那样.)

th,td { border-left: 15px solid transparent; }
tr > td:first-child,tr > th:first-child { border-left: 5px solid #fff; }
tr.low > td:first-child { border-left: 5px solid red; }

示例小提琴：https://jsfiddle.net/abhitalks/s9taanz7/5/
片段：

* { box-sizing: border-box; }
body { background-color: blue; }
table {
    border-collapse: collapse;
    table-layout: fixed; width: 100%;
}
th,td {
    background-color: #fff;
    padding: 10px 15px 8px 8px;
    border-left: 5px solid transparent;
    border-bottom: 1px solid gray;  
}
th {
    border-bottom: 1px solid blue;
    font-weight: normal; text-align: left;
}
tr > td:first-child,tr > th:first-child { border-left: 10px solid #fff; }
tr.low > td:first-child { border-left: 10px solid red; }

但是,这种方法会产生隐藏边框底部的副作用,因为边框与左边重叠.
解决方案2：
你可以在左边有一个额外的单元格作为指标.然后,您可以使用colgroup来控制它.这种方法比上面更整洁,并且还要求您在css中仅指定一次宽度.
示例小提琴2：http://jsfiddle.net/abhitalks/z7u1nhwt/1/
摘录2：

* { box-sizing: border-box; }
body { background-color: blue; }
table {
    border-collapse: collapse;
    table-layout: fixed; width: 100%;
}
th,td {
    background-color: #fff;
    padding: 10px 15px 8px 8px;
    border-bottom: 1px solid gray;  
}
th {
    border-bottom: 1px solid blue;
    font-weight: normal; text-align: left;
}
.col1 { width: 10px; }
tr.low > td:first-child {
    background-color: #f00;
}

当然,您也可以尝试使用@misterManSam提出的伪元素的方法,具体取决于您的实施方便性.
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!