以相同的方式将 tr 与不等数量的 td 对齐答案

【问题标题】：Align tr the same way with unequal number of td以相同的方式将 tr 与不等数量的 td 对齐
【发布时间】：2017-09-13 23:33:01
【问题描述】：

我遇到了 tr/td 元素的问题。

这是目前的样子：

我希望“Stromausfalltest 2017”与下面的项目（以及点）对齐。

问题是：HTML 不同。如您所见，第一项没有时间跨度，但上面的项有。

这是我要对齐的项目：

<tr class="fc-list-item ddk-fc-cs-0" target="_blank">
  <td class="fc-list-item-marker fc-widget-content">
    <span class="fc-event-dot"></span>
  </td>
  <td class="fc-list-item-title fc-widget-content">
    <a>Stromausfalltest 2017</a>
  </td>
</tr>

这就是下面的项目（有时间跨度）：

<tr class="fc-list-item ddk-fc-cs-0" target="_blank">
  <td class="fc-list-item-time fc-widget-content">11:30am - 12:30pm</td>
  <td class="fc-list-item-marker fc-widget-content">
    <span class="fc-event-dot"></span>
  </td>
  <td class="fc-list-item-title fc-widget-content">
    <a>1 x 10 + 4 x 20 + 1 x 25 Years DDK!</a>
  </td>
</tr>

问题是这个 HTML 是由第三方 API 呈现的，我不能更改 API。

有 CSS 的解决方案吗？

【问题讨论】：

您想在哪里显示时间跨度？还是要将第一行再向右移动？
@MatthiasS。是的，我想将第一行向右移动，以便与第二行对齐（尽管第一行没有时间跨度）。

标签： javascript html css html-table

【解决方案1】：

如果行中的类中只有 2 个 td，那么您可以在 css 中使用 before 规则插入额外的 td：

.ddk-fc-cs-0::before{
    content:" ";
    display:table-cell;
}

尝试在其中添加该规则。如果具有 2 个 td 的行始终具有类 .ddk-fc-cs-0，那么就可以解决问题。

这是一个适合你的工作小提琴：https://jsfiddle.net/fsaud7e1/

【讨论】：