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

Question

我遇到了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有解决方案吗？

Answer 1

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

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

尝试添加该规则。如果具有2个td的行总是具有类.ddk-fc-cs-0那么那就行了。

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