如何让SPFx React web part中Table的<TD>标签占满全部垂直空间

解决方案 #

你需要修改3处代码即可实现第一个单元格内容完全占满纵向空间的效果：

1. 调整SingleNews.module.scss样式，让容器可自动撑满高度：

/* 新增td基础样式 */
table td {
  vertical-align: top;
  height: 100%;
}

.singleNews {
  text-decoration: none;
  font-family: $font-family;
  font-size: $font-size;
  font-weight: $regular-font-weight;
  /* 新增以下3行 */
  height: 100%;
  display: flex;
  flex-direction: column;

  &__image {
    padding: 5em;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* 新增以下1行，让图片区域自动填充剩余纵向空间 */
    flex-grow: 1;

    &.featured {
      height: 75%;
    }
  }

  &__content {
    /* 可选新增：避免内容区域被压缩 */
    flex-shrink: 0;
    padding: 1em;
    background-color: $white;
    overflow: hidden;
    border: 1px solid $medium-silver;
    border-top: none;
    display: flex;
    flex-direction: column;
    /* 其余原有样式保持不变 */
  }
  /* 其余原有样式保持不变 */
}

2. 修改newstablecell.tsx，给跨两行的首个单元格图片绑定你预先定义的featured类：

<div
  className={`${styles.singleNews__image} ${rowspan === 2 ? styles.featured : ''}`}
  style={{ backgroundImage: `url(${post.image})` }}
/>

修改完成后首单元格的图片区域会自动拉伸占满整个单元格的纵向空间，不会再出现留白区域。

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