使用HTML和CSS中的底线预订索引布局样式

Question

如何在HTML＆amp;中实现此布局？ CSS？

也许有桌子，但我需要中间栏用边框底部（或其他东西）填充空白区域

这是codepen

<table class="table">
  <tbody>
    <tr>
      <td>
        <h5>Index 1</h5></td>
      <td>
        <span class="line">&nbsp;</span>
      </td>
      <td>
        Content
      </td>
    </tr>
    <tr>
      <td>
        <h5>Index 2</h5></td>
      <td>
        <span class="line"></span>
      </td>
      <td>
        Content
      </td>
    </tr>
  </tbody>
</table>

Answer 1

试试这个

<table class="table">
  <tbody>
    <tr>
      <td class="Index">
        <h5>Index 1</h5>
      </td>

      <td>
        Content
      </td>
    </tr>
    <tr>
      <td class="Index">
        <h5>Index 11</h5>
      </td>

      <td>
        Content
      </td>
    </tr>
  </tbody>
</table>

＆LT; ---- ----- CSS＆GT;

table {
  width: 50%;
  border-collapse: collapse;
  white-space: nowrap;
}
table h5 {
  margin: 0;
  display:inline-block;
}
td,
tr,
table {
  padding: 0;
  overflow:hidden
}

.Index::after{
  content:"";
width:100%;
  display:inline-block;
background-color:#000;
height:1px;}

Answer 2

如果您正在使用表格，那么您可以通过以下代码实现相同的目标

＆＃13;

＆＃13;

table {
  width: 50%;
  border-collapse: collapse;
  white-space: nowrap;
}
table h5 {
  margin: 0;
}
td,
tr,
table {
  padding: 0;
}
td:nth-child(2) {
  border-bottom: 1px solid;
  width: 100%;
}

＆＃13;

<table class="table">
  <tbody>
    <tr>
      <td>
        <h5>Index 1</h5>
      </td>
      <td>
        <span class="line">&nbsp;</span>
      </td>
      <td>
        Content
      </td>
    </tr>
    <tr>
      <td>
        <h5>Index 2</h5>
      </td>
      <td>
        <span class="line"></span>
      </td>
      <td>
        Content
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;