Question

我已经在HTML表格的单行的几个连续单元格上应用了CSS border-bottom:1px dashed #494949;，但边框不统一。每个单元格末尾的破折号显得更短。虚线边框也不统一。我也在使用border-collapse:collapse;

以下是截图：

enter image description here

有什么方法可以得到统一的虚线边框吗？

Answer 1

浏览器在渲染虚线边框时有些奇怪。您可以通过删除单元格间距和单元格填充并在tr元素上设置边框而不是在单元格上来对抗它们，例如

table { border-collapse: collapse; }
td { padding: 0; }
tr { border-bottom:1px dashed #494949; }

但是IE 9（在单元格连接处）似乎仍然失败，旧版浏览器会忽略在表行上设置的边框。

请考虑使用纯灰色边框。它工作一致，可能在视觉上可以接受，甚至可能更好。

Answer 2

很难确定没有屏幕截图或演示时发生了什么，但听起来它们在转换到下一个单元格时似乎更长，因为最后一个短划线正在触及下一个单元格中的第一个短划线。

在这种情况下，尝试将边框放在整行而不是单个单元格上。

Answer 3

我在应用程序上解决此问题的方法是添加一个额外的行，该行具有与带有虚线边框的行相同的colspan。边框将与跨度的长度一致：

<table>
    <!--row with dashed border-->
      <tr>
          <td style = "border-bottom: 1px dashed green;" colspan="3"></td>
      </tr>
    <!--added row so dotted border looks uniform-->
      <tr>
          <td style="height: 5px;" colspan="3"></td>
      </tr>
    <!--existing rows with lots of columns-->
      <tr>
          <td></td>
          <td></td>
          <td></td>
      </tr>
</table>

Answer 4

我不确定，但它看起来像渲染问题。即使使用背景图像而不是边框底部也会出现同样的问题。

Answer 5

在这种情况下，最好的选择是创建一个重复的图像文件，其高度是表格行的高度。将其设置为表格背景，并确保重复。我测试了它，它的工作原理。请注意，在为此示例创建的PNG文件中，短划线的长度均为3px，右侧有三个空白尾随像素，最终尺寸为30px（宽度）x 29px（高度）。

以下是代码：

.borderTable {
  background: url(http://www.windycitywebsites.com/wp-content/uploads/2012/03/dash_png.png);
  background-repeat: repeat;
}

.borderTable td {
  height: 29px;
}

<table class="borderTable" width="350" border="0" cellspacing="0" cellpadding="0">
  <tr class="stuff">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="stuff">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Answer 6

DIZAD的答案（https://stackoverflow.com/a/57263732/2077884几乎有效）对我几乎有效，但是在td上添加边框仍然会导致奇怪的虚线边框。在td内的div中添加边框对我来说就是固定的。

const RowBorder = styled('div')`
  border-top: 1px dashed black;
  width: 100%;
`;
return (
  <table>
    <thead>
      <tr>
        <td colSpan="6">
          <RowBorder />
        </td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td colSpan="2">Col5</td>
      </tr>
      <tr>
        <td colSpan="6">
          <RowBorder />
        </td>
      </tr>
    </thead>
    <tbody>{rows}</tbody>
  </table>
)

Answer 7

九年过去了，这仍然让人头疼！

此方法适用于 IE11+ 和所有其他主要浏览器，而无需仅为边框创建空行：

table {
  width: 100%;
  border-collapse: collapse;
  position: relative; /* Required #1 */
}
td {
  height: 60px;
  text-align: center;
  background: #EEE;
  border: 1px solid #CCC;
}
tr:nth-child(even) td {
  background: #DDD;
}
td:nth-child(1) {
  padding: 0;  /* Required #2 */
  width: 30%;
}

/* Required #3 */
td:nth-child(1)::after {
  display: block;
  content: ' ';
  width: 100%;
  margin-bottom: -1px;
  position: absolute;
  border-bottom: 2px dashed;
}

td:nth-child(2) {
  width: 50%;
}
td:nth-child(3) {
  width: 20%;
}

/* Required #4 */
span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

<table>
  <tr>
    <td><span>Row 1, Cell 1</span></td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td><span>Row 2, Cell 1</span></td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
  <tr>
    <td><span>Row 3, Cell 1</span></td>
    <td>Row 3, Cell 2</td>
    <td>Row 3, Cell 3</td>
  </tr>
</table>

这是可行的，因为边框附加到具有绝对位置的伪元素，其宽度取自表格，而不是纯粹绑定到单元格。

有四个主要方面需要注意（在 CSS 中注释）：

表格有position: relative，所以线条适应那个宽度；很遗憾，您无法将其应用于表格行。
每行的第一个单元格不应有任何填充，否则该行可能与行底部不平齐；如果您需要填充，则可以在 #4 中定义。
这会创建线本身；它基本上是一个 position: absolute 的伪元素，带有一个 width: 100% 来横跨整个表格。我还添加了边框大小一半的负边距，因此它很好地位于两行之间。您可能还注意到没有 top/left/right/bottom 属性；这是为了使元素保持在绝对定位之前的位置。
这是每行第一个单元格内的元素；主要是添加 height: 100% 以便它强制在 #3 处创建的行位于行的底部。考虑到这一点后，您可以随意设置样式。

td 内的标准边框不是必需的；我已经包含了它来演示单元格的位置。

表格单元格中的非均匀虚线边框

7 个答案: