在 html 中对齐 table 中的文本片段

Question

我有以下 html/css 代码：

table,
th,
td {
  border: 1px solid black;
}

.textToBeBorderedGreen {
  border: 1px solid green;
}

.textToBeBorderedRed {
  border: 1px solid red;
}

<table style="width: 100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th style="width: 20%">Job</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td style="width: 20%">
      <div style="width: 70%">really long text that extends towards bottom of table cell</div>
      <div class="textToBeBorderedGreen" style="float: right; width: 30%">Accepted</div>
      <div style="width: 70%">UX Designer</div>
      <div class="textToBeBorderedGreen" style="float: right; width: 30%">Accepted</div>
    </td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td style="width: 20%">Software Developer
      <div class="textToBeBorderedRed" style="float: right">Rejected</div>
    </td>
  </tr>
</table>

对于最右侧列中的值，我希望左右两侧的文本垂直对齐（accepted/rejected 文本直接出现在彼此的下方）和水平对齐（accepted/rejected 文本直接出现在最左边文本的右侧，如果最左边的文本覆盖多行，那么 accepted/rejected 文本应该在它的中间）类似于包含的图像

我还希望 accepted/rejected 文本周围的方框长度相同（类似于图像），无论 space 里面的文本占用多少 - 谁知道怎么走对这个？我得到的代码是我能做到的最远的代码。

Answer 1

看来您将不得不进入 css 网格，这有点复杂。你的代码应该是这样的：

table,
th,
td {
    border: 1px solid black;
}

.textToBeBorderedGreen {
    border: 1px solid green;
}

.textToBeBorderedRed {
    border: 1px solid red;
}

.cell {
    grid-template-columns: 70% 30%;
    display: grid;
}

.label-1 {
    grid-column: 1;
}

.label-2 {
    grid-column: 1;
    grid-row: 2;
}

.tag-1 {
    grid-column: 2;
    margin: auto auto;
}

.tag-2 {
    grid-column: 2;
    grid-row: 2;
    margin: auto auto;
}

<link rel="stylesheet" href="table.css">
<table style="width: 100%">
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th style="width: 20%">Job</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td class="cell">
            <div class="label-1">really long text that extends towards bottom of table cell</div>
            <div class="textToBeBorderedGreen tag-1">Accepted</div>
            <div class="label-2">UX Designer</div>
            <div class="textToBeBorderedGreen tag-2">Accepted</div>
        </td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td class="cell">
            <div class="label-1">Software Developer</div>
            <div class="textToBeBorderedRed tag-1">Rejected</div>
        </td>
    </tr>
</table>

父级 div 定义网格的方式。我在“接受”和“拒绝”之前为网格列设置了 70% 的宽度，并将这些词的网格列的宽度设置为 30%。

最后，我将边距设置为“auto auto”，在不影响 div 高度的情况下将其水平和垂直放置在中间。

您现在要做的就是调整 table 的大小以适应 colored-border divs

希望对您有所帮助！

Answer 2

使用 flexbox 很容易实现您想要实现的目标。我已经修改了您的 HTML 并添加了一些内联样式。请尝试此代码

table,
th,
td {
  border: 1px solid black;
}

.textToBeBorderedGreen {
  border: 1px solid green;
}

.textToBeBorderedRed {
  border: 1px solid red;
}

<table style="width: 100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th style="width: 20%">Job</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td style="width: 20%">
      <div style="display:flex;justify-content: space-between;align-items: center;">
        <div>really long text that extends towards bottom of table cell</div>
        <div class="textToBeBorderedGreen" style="flex-shrink: 0;">Accepted</div>
      </div>
      <div style="display:flex;justify-content: space-between;align-items: center;">
        <div>UX Designer</div>
        <div class="textToBeBorderedGreen" style="flex-shrink: 0;">Accepted</div>
      </div>
    </td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td style="width: 20%">
      <div style="display:flex;justify-content: space-between;align-items: center;">
        <div>Software Developer</div>
        <div class="textToBeBorderedRed" style="flex-shrink: 0;">Rejected</div>
      </div>
    </td>
  </tr>
</table>

在 html 中对齐 table 中的文本片段

aligning pieces of text within a table in html

html

css

css-tables