Question

我想在下面的屏幕截图上看到类似的效果：

这是我目前的代码：

table {
    border-collapse: collapse;
}

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

我不知道如何不对TD的内容加下划线，而仅对空格进行下划线。

Answer 1

如果您的浏览器兼容，我可以使用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/

带下划线的表格行，但不包含内容

1 个答案: