如何强制Table中的TD单元格占满全部垂直高度

方案1：替换table为flex布局（推荐，适配你现有SCSS，调整量最小） #

你已经提前写好了.featureNews、.featured、.secondary的flex样式，完全不需要用table实现布局，直接替换HTML结构即可：

<div class="featureNews">
  <!-- 左侧大卡片（占2份宽度） -->
  <div class="featured">
    <a class="singleNews_4011fad0" href="https://.sharepoint.com/sites/SovDemo/SitePages/Why-I-donate-to-charities.aspx">
      <div class="singleNews__image_4011fad0 featured" style="background-image: url('https://.sharepoint.com/sites/SovDemo/SiteAssets/1one.jpg');"></div>
      <div class="singleNews__content_4011fad0 featured">
        <div class="singleNews__content__info_4011fad0">
          <span class="singleNews__content__info__label_4011fad0">Featured News</span>
          <span class="singleNews__content__info__date_4011fad0">11-11-2021</span>
        </div>
      </div>
      <div class="singleNews__content_4011fad0 featured">
        <div class="singleNews__content__info_4011fad0">
          <h2 class="singleNews__content__info__title__featured_4011fad0">Contoso employee giving program</h2>
          <div class="singleNews__content__info__reactions_4011fad0">
            <span class="singleNews__content__info__reactions__likes_4011fad0">
              <i data-icon-name="Like" aria-hidden="true" class="root-168"></i>22
            </span>
            <span class="singleNews__content__info__reactions__comments_4011fad0">
              <i data-icon-name="ActionCenter" aria-hidden="true" class="root-168"></i>2332
            </span>
          </div>
        </div>
      </div>
    </a>
  </div>
  <!-- 右侧两个小卡片（占1份宽度，垂直排列） -->
  <div class="secondary">
    <a class="singleNews_4011fad0" href="https://.sharepoint.com/sites/SovDemo/SitePages/Replacing-What-Is-Used.aspx">
      <div class="singleNews__image_4011fad0" style="background-image: url('https://.sharepoint.com/sites/SovDemo/SiteAssets/2two.jpg');"></div>
      <div class="singleNews__content_4011fad0">
        <div class="singleNews__content__info_4011fad0">
          <span class="singleNews__content__info__label_4011fad0">Coorporate News</span>
          <span class="singleNews__content__info__date_4011fad0">11-11-2021</span>
        </div>
      </div>
      <div class="singleNews__content_4011fad0">
        <div class="singleNews__content__info_4011fad0">
          <h2 class="singleNews__content__info__title_4011fad0">Replacing What Is Used</h2>
          <div class="singleNews__content__info__reactions_4011fad0">
            <span class="singleNews__content__info__reactions__likes_4011fad0">
              <i data-icon-name="Like" aria-hidden="true" class="root-168"></i>22
            </span>
            <span class="singleNews__content__info__reactions__comments_4011fad0">
              <i data-icon-name="ActionCenter" aria-hidden="true" class="root-168"></i>2332
            </span>
          </div>
        </div>
      </div>
    </a>
    <a class="singleNews_4011fad0" href="https://.sharepoint.com/sites/SovDemo/SitePages/A-Task-Force-for-Change.aspx">
      <div class="singleNews__image_4011fad0" style="background-image: url('https://.sharepoint.com/sites/SovDemo/SiteAssets/3three.jpg');"></div>
      <div class="singleNews__content_4011fad0">
        <div class="singleNews__content__info_4011fad0">
          <span class="singleNews__content__info__label_4011fad0">People News</span>
          <span class="singleNews__content__info__date_4011fad0">11-11-2021</span>
        </div>
      </div>
      <div class="singleNews__content_4011fad0">
        <div class="singleNews__content__info_4011fad0">
          <h2 class="singleNews__content__info__title_4011fad0">A Task Force for Change</h2>
          <div class="singleNews__content__info__reactions_4011fad0">
            <span class="singleNews__content__info__reactions__likes_4011fad0">
              <i data-icon-name="Like" aria-hidden="true" class="root-168"></i>22
            </span>
            <span class="singleNews__content__info__reactions__comments_4011fad0">
              <i data-icon-name="ActionCenter" aria-hidden="true" class="root-168"></i>2332
            </span>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

然后只需要在第一份SCSS的.singleNews选择器下加3行样式即可：

.singleNews {
  text-decoration: none;
  font-family: $font-family;
  font-size: $font-size;
  font-weight: $regular-font-weight;
  /* 新增以下三行 */
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 原有样式保持不变 */
  &__image {
    /* 原有样式不变 */
  }
  /* 其余原有样式保持不变 */
}

flex布局的子项默认是align-items: stretch，左侧.featured的高度会自动和右侧两个卡片加间距的总高度一致，完美实现你要的左侧卡片占满全部垂直高度的效果，响应式也完全适配你已经写好的768px断点样式。

方案2：保留现有table结构调整 #

如果你一定要保留table布局，按以下步骤调整：

1. 给table标签加样式：<table style="width: 100%;border-collapse: collapse;height: 100%;border-spacing: 1em;">，解决表格高度不继承、单元格间距问题
2. 给所有td标签加样式：<td style="height: 100%;padding: 0;vertical-align: top;">，让单元格高度撑满、内容顶对齐
3. 同样在第一份SCSS的.singleNews选择器下加和方案1相同的3行样式：display: flex;flex-direction: column;height: 100%;

调整后即可实现左侧单元格占满全部垂直高度的效果。

内容的提问来源于stack exchange，提问作者John John