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

【问题标题】：Non Uniform Dashed Border in Table Cells表格单元格中的非均匀虚线边框
【发布时间】：2012-04-04 22:18:39
【问题描述】：

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

截图如下：

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

【问题讨论】：

你能显示你的表格的一般 html，我们可以看到你到底在哪里附加了 css？
它们只是看起来很长，将尺寸减小到 1px 以获得更清晰的边框。
就像 Starx 所说的那样。您需要稍微增加或减少表格大小。顺便说一句，您不需要在行中的每个表格单元格上制作边框底部。您可以将边框直接附加到行。

标签： html css border css-tables

【解决方案1】：

如果没有屏幕截图或演示，很难确定发生了什么，但听起来它们在过渡到下一个单元格时似乎更长，因为最后一个破折号与下一个单元格中的第一个破折号接触。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

代码如下：

.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>

【讨论】：

请注意，如果您绝对需要仅突出显示某些行，我可能会建议创建单列表行并使用 DIV 或 TABLE 填充行并将 .borderTable 类应用于它。

【解决方案4】：

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

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

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

考虑改用纯灰色边框。它始终如一地工作，并且可能在视觉上可以接受，甚至可能更好。

【讨论】：

能否提供一些演示，似乎不是一个可行的解决方案

【解决方案5】：

我在我的应用程序上解决此问题的方法是添加一个与带有虚线边框的行具有相同 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>

【讨论】：

谢谢，这有帮助。我什至使用了一个空行，这样我就不必对<td>s 进行硬编码，而且感觉少了一些解决方法。

【解决方案6】：

DIZAD's answer 几乎对我有用，但是向 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>
)

【讨论】：

【解决方案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 内的标准边框不是必需的；我已将其包含在内以演示单元格的位置。

【讨论】：