css - 下划线表格行但不是其中的内容

问题描述

我想看到如下截图所示的效果：

这是我目前的代码：

table {
    border-collapse: collapse;
}

table tr td {
    border-bottom: 1px solid #000;
}

我不知道如何不在 TD 的内容下划线，而只在空白处划线。

标签： css

如果您的浏览器兼容性没问题，我会为此使用 flexbox。

<html>

<table>
  <tr>
    <td>
      <div class="holder">
        <div class="label">FooBar</div>
        <div class="divider">
          &nbsp;
        </div>
        <div class="money">$1,000</div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="holder">
        <div class="label">FooBarFooBarFooBarFooBar</div>
        <div class="divider">
          &nbsp;
        </div>
        <div class="money">$1,000</div>
      </div>
    </td>
  </tr>
 </table>
</html>

风格：

.divider {
  border-bottom: 1px solid black;
  flex-grow: 1;  
}



.holder {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  width: 500px;
  justify-content: stretch;

}

.label, .money {
  flex-grow: 0;
  flex-basis: auto;
}

https://jsfiddle.net/pkyv8n5o/1/

css - 下划线表格行但不是其中的内容

问题描述

解决方案

推荐阅读