主页 / 问题 / 825575
Accepted
user3178479
Asked:2020-05-10 01:19:30 +0000 UTC2020-05-10 01:19:30 +0000 UTC

html表格，单元格之间有虚线

  • 772

如何制作这样一个在单元格之间有虚线的表格，尽可能跨浏览器和自适应（没有 flex、grid、svg）？

在此处输入图像描述

我这样做了，但虚线没有到达末尾：

table {
	width: 100%;
	white-space: nowrap;
}

table td {
	width:100%;
}

table td+td {
	text-align: right;
	width: auto;
}

.table-label {
	overflow: hidden;
}

.table-label>span {
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

.table-label>span:after {
	content: '';
    position: absolute;
    bottom: 5px;
    right: -9999px;
    left: 100%;
    color: #cecece;
    margin-left: 5px;
    border-bottom: 1px dashed #cecece;
}
<table>
  <tr>
    <td>
      <div class="table-label">
        <span>
          Lorem ipsum.
        </span>
      </div>
    </td>
    <td>
      <span>
        111
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <div class="table-label">
        <span>
          Lorem.
        </span>
      </div>
    </td>
    <td>
      <span>
        2222222222
      </span>
    </td>
  </tr>

  <tr>
    <td>
      <div class="table-label">
        <span>
          Lorem ipsum dolor.
        </span>
      </div>
    </td>
    <td>
      <span>
        33
      </span>
    </td>
  </tr>
</table>

html

2 个回答

  1. Best Answer

    你需要一张桌子吗？我可以提供一个项目符号列表。

    ul.list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  border-bottom: 1px dashed #cecece;
  position: relative;
  padding: 0;
  margin-bottom: 5px;
}

li span {
  background-color: #FFF;
  margin: 0;
}

li span.text,
li span.num {
  bottom: -5px;
}

span.text {
  position: relative;
  margin-right: 7em;
  padding-right: 2px;
}

span.num {
  position: absolute;
  right: 0;
  padding-left: 3px;
}
    <ul class="list">
  <li>
    <span class="text">Lorem ipsum.</span>
    <span class="num">111</span>
  </li>
  <li>
    <span class="text">Lorem.</span>
    <span class="num">2222222222</span>
  </li>
  <li>
    <span class="text">Lorem ipsum dolor.</span>
    <span class="num">33</span>
  </li>
</ul>

    • 3

  2. 更短的代码

    p {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #000;
}
    <p><span>lorem</span><span>$9</span></p>
<p><span>lorempixel</span><span>$12</span></p>
<p><span>loremshmorempixel</span><span>$22</span></p>
<p><span>loremdorem</span><span>$11</span></p>

    • 2

相关问题