如何在表格中显示漂亮的虚线边框？

Question

为了给我的桌子制作一个完美的间距虚线，我已经在使用CSS几个小时了。我尝试过border属性，创建一个图像并将其作为背景，在Y轴上重复它，以及其他一些东西（甚至在CSS3中），但我的情况比我发现的更具体一些。在Google中搜索：我在表格中交替使用了列和行类，似乎我无法用连续的边框定义整行。

我的CSS：

cd ~/first
git pull
git log --all --oneline | wc -l
21962

cd ~/second.git
# second
git fetch
git log FETCH_HEAD --all --oneline | wc -l
21903

我也尝试过更改＆＃34; border-bottom＆＃34;如前所述，有点和空格的背景图像。

我今天拥有的是：

我希望这些点是连续的：。 。 。 。 。 。 。 。 。 。 。 。

Answer 1

尝试设置regex = /[!-\/:-@\[-`{-~]$/ 以分隔双点。但是使用regex = [!-\/:-@\[-`{-~]$<[^>]*> 创建表格。为此，这是更好的方式。

＆＃13;

＆＃13;

border-left : 1px solid white

＆＃13;

<div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

免责声明：这不是一个简单的解决方案，理解起来相当复杂，但如果你真的想要产生连续点，那么这是我能想到的唯一方法。我不建议为边界的小像差添加如此多的复杂性，但我会留给你。

创建连续边框的方法非常简单：

• 使用table图片将虚线背景添加到radial-gradient本身。由于table是父容器，因此这些点以无缝方式连续延伸。
• Y轴背景渐变的大小相当于两侧td + padding的高度。这对工作至关重要。
• Y轴背景的位置计算为-1 *（Y轴/ 2的背景大小） - 2px。
• background-repeat设置为round，因此它总是产生完整的点。所有这些对解决方案都至关重要。
• 无法将颜色作为纯色添加到td或tr，因为它们会隐藏table背景，因此解决方案是通过linear-gradient添加它们（除了颜色没有改变）。这样做是因为可以控制渐变的大小而不能控制纯色的大小。

＆＃13;

＆＃13;

table { /* to produce the dots via radial gradient */
  background-image: radial-gradient(circle at 50% 50%, black 1px, transparent 2px);
  background-size: 8px 50px; /* size in y-axis is equal to td height + padding top + padding bottom */
  background-position: 2px -27px; /* position in y-axis is -1 * size/2 - 2px */
  background-repeat: round; /* makes dots repeat in round manner */
  border-collapse: collapse;
}
td {
  vertical-align: bottom;
  height: 46px; 
  padding: 2px;
}
tr:nth-child(even) {
  background-image: linear-gradient(#eee, #eee);
  background-size: 100% 46px; /* size in y-axis is height of td */
  background-repeat: no-repeat;
}
tr:nth-child(even) td:nth-child(even) {
  background-image: linear-gradient(#e2e2e2, #e2e2e2);
  background-size: 100% 46px;
  background-repeat: no-repeat;
}
tr:nth-child(odd) td:nth-child(even) {
  background-image: linear-gradient(#eaeaea, #eaeaea);
  background-size: 100% 46px;
  background-repeat: no-repeat;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<table>
  <tr>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
  </tr>
  <tr>
    <td>Hello World!!!</td>
    <td>Hello World!!!</td>
    <td>Hello World!!!</td>
  </tr>
  <tr>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
  </tr>
  <tr>
    <td>Hi There!!!</td>
    <td>Hi There!!!</td>
    <td>Hi There!!!</td>
  </tr>
</table>
<br/>
<table>
  <tr>
    <td>Lorem Ipsum Dolor Sit Amet</td>
    <td>Lorem Ipsum Dolor Sit Amet</td>
    <td>Lorem Ipsum Dolor Sit Amet</td>
  </tr>
  <tr>
    <td>Lorem Ipsum Dolor</td>
    <td>Lorem Ipsum Dolor</td>
    <td>Lorem Ipsum Dolor</td>
  </tr>
  <tr>
    <td>Lorem Ipsum Dolor Sit</td>
    <td>Lorem Ipsum Dolor Sit</td>
    <td>Lorem Ipsum Dolor Sit</td>
  </tr>
  <tr>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

如你在评论中提供的小提琴所示，如果所有td都有一些纯色作为背景（白色或其他灰色阴影），则整个过程变得更加简单。在这种情况下，我们不需要linear-gradient或其他td属性的额外background-*背景。即使tr和td的维度不固定，此方法仍然有效。

＆＃13;

＆＃13;

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 12px;
  font-family: Arial;
  color: #333;
  font-size: 13px;
  background-image: radial-gradient(circle at 50% 50%, #999 1px, transparent 1px);
  background-size: 4px 2px;
  background-repeat: round;
}
td {
  padding: 16px;
  border-bottom: 2px solid transparent;
}
tr.odd td.odd {
  background: #fff padding-box;  /* the padding-box property is to prevent the background from being present under the 2px transparent border area */
}
tr.even td.odd {
  background: #eee padding-box;
}
tr.even td.even {
  background: #e2e2e2 padding-box;
}
tr.odd td.even {
  background: #eaeaea padding-box;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<table>
  <tr class="odd">
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum
      <br>Dolor Sit Amet</td>
  </tr>
  <tr class="even">
    <td class="odd">Lorem Ipsum
      <br>Dolor
      <br>Sit
      <br>Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
  </tr>
  <tr class="odd">
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
  </tr>
  <tr class="even">
    <td class="odd">Lorem
      <br>Ipsum
      <br>Dolor
      <br>Sit
      <br>Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

演示我是否正在使用radial gradient来制作圆点。你可以＆＃34;玩＆＃34;使用底部的range控件可以找到确切的结果。

＆＃13;

＆＃13;

$('input').on('input', function(){
  $('tr').css('background-size', $(this).val() + 'px 4px'); 
  $('#num').html($(this).val());
});

＆＃13;

table {
  width: 400px;
  border-spacing: 0;
}
th {
  text-align: left;
}
tr {
  background: radial-gradient(circle at bottom, black 1px, transparent 1.5px) repeat-x bottom;
  background-size: 5px 4px;  
}
tr:first-child {
  font-weight: bold;
}
tr:nth-child(odd) {
  background-color: #eee;
}
td {
  padding: 5px;
  /*border-bottom:1px dotted #aaa;*/
  /*background: radial-gradient(circle at bottom, black 1px, transparent 1.5px) repeat-x bottom;
  background-size: 5px 4px;*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tbody>
      <tr>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
      </tr>
    </tbody>
</table>
<br />
<input type="range" value="5" min="5" max="15" />
<pre>background-size: <span id="num">5</span>px 4px;</pre>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我必须使用tr> td> div方法来获得漂亮的虚线边框。如果将虚线边框放在td或tr上，则虚线根据td的长度而相互碰到，这会产生奇怪的效果，其中虚线的长度比应有的长。

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