表行边框 - 半进,半出

Question

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

该表将在每行的左侧显示一个彩色指示器,因此我正在使用border-left: 5px solid red;它来添加它.然而,虽然边界适用 - 其中一半在行内,一半在外面.我试过添加border-collapse: 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;
}

<table style="
    border-collapse: collapse;
">
  <tbody>
    <tr>
      <th>#</th>
      <th>Status</th>
      <th>Title</th>
      <th>Project</th>
      <th>Assigned To</th>
      <th>Age</th>
    </tr>

    <tr class="low">
      <td>1</td>
      <td>New</td>
      <td>This is an example ticket</td>
      <td>Something</td>
      <td>Something</td>
      <td>2 days ago</td>
    </tr>
  </tbody>
</table>

Answer 1

但是，尽管边界适用 - 一半在行内，一半在行外

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

边框以单元格之间的网格线为中心...

它还通过带有说明的图表说明了这一点。

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

是的，它可以很容易地在这个小提琴中演示：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; }

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Caption</td>
            <td>Description</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Caption</td>
            <td>Description</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Caption</td>
            <td>Description</td>
        </tr>
    </tbody>
</table>

解决方案：

只需为所有行添加相同宽度的透明边框。这样边框宽度将相同，并且会整齐对齐。（更新：border-left在第一列中添加了一个白色以隐藏突出显示的单元格上的悬挂边框。正如您的评论所指出的那样。）

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/

片段：

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; }

* { 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; }

但是，这种方法会产生隐藏的副作用，border-bottom因为它border-left与它重叠。

解决方案2：

您可以在左侧有一个额外的单元格用作指示符。然后，您可以使用 来控制它colgroup。这种方法比上面的更简洁，并且还要求您在 css 中只指定一次宽度。

示例小提琴 2：http : //jsfiddle.net/abhitalks/z7u1nhwt/1/

片段 2：

<table>
	<thead>
		<tr>
			<th>#</th>
			<th>Status</th>
			<th>Title</th>
			<th>Project</th>
			<th>Assigned To</th>
			<th>Age</th>
		</tr>
	</thead>
	<tbody>
		<tr class="">
			<td>1</td>
			<td>New</td>
			<td>This is an example ticket</td>
			<td>Something</td>
			<td>Something</td>
			<td>2 days ago</td>
		</tr>
		<tr class="low">
			<td>2</td>
			<td>New</td>
			<td>This is an example ticket</td>
			<td>Something</td>
			<td>Something</td>
			<td>2 days ago</td>
		</tr>
		<tr class="">
			<td>3</td>
			<td>New</td>
			<td>This is an example ticket</td>
			<td>Something</td>
			<td>Something</td>
			<td>2 days ago</td>
		</tr>
	</tbody>
</table>

* { 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 提出的使用伪元素的方法，具体取决于您的实现难易程度。}