css - 在其标题的末尾位置对齐表格内容

Question

我需要创建一个居中的表头，其值必须右对齐并从表头的最后一个字符开始。

示例：

有什么想法吗？我找到了一种需要知道标头大小的方法，但它需要知道每个分辨率的大小。

标签： csssassflexbox

Answer 1

您将需要 3 列，将 3 tds 或 1 td + 伪元素转换为 table-cell 。

对于 flex 或 grid 布局，您还需要 3 列开始。

前任：

table {
  width: 100%;
  border: dashed;
  border-collapse: collapse;
  background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.2) 50%)
}

tr:not(:first-of-type):not(:last-of-type) {
  border: dashed
}

tr:before,
tr:after {
  content: '';
  display: table-cell;
  width: 50%
}

td {
  padding: 0.45em;
  width: 0;
  white-space: nowrap;
  text-align: right;
  background: linear-gradient(to right, transparent 50%, rgba(100, 0, 0, 0.2) 50%)
}


/* ==== flex , not use ===*/

section {
  display: flex;
  border: dashed;
  position: relative;
  background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.2) 50%)
}

section:before,
section:after {
  content: "";
  flex: 1;
}

p:not(:first-of-type):not(:last-of-type):before {
  content: '';
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 32.5%;
  top: 32.5%;
  border-top: dashed;
  border-bottom: dashed
}

p {
  margin: 0;
  padding: 0.5em;
  white-space: nowrap;
  text-align: right;
  background: linear-gradient(to right, transparent 50%, rgba(100, 0, 0, 0.2) 50%)
}


/*===== grid ======*/

body>div {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  border: dashed;
  background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.2) 50%);
  position: relative;
}

p {
  grid-column: 2;
  margin: 0;
  padding: 0.5em;
  white-space: nowrap;
  text-align: right;
  background: linear-gradient(to right, transparent 50%, rgba(100, 0, 0, 0.2) 50%)
}

<table>
  <caption><code>Table-layout</code></caption>
  <tr>
    <td>column name</td>
  </tr>
  <tr>
    <td>column </td>
  </tr>
  <tr>
    <td>name</td>
  </tr>
</table>

<code>flex</code>, too verbose to be useful
<section>
  <div>
    <p>column name</p>
    <p>column </p>
    <p> name </p>
  </div>
</section>

<code>grid</code>, efficient enough.
<div>
  <p>column name</p>
  <p>column </p>
  <p> name </p>
</div>