html - 表 td 溢出滚动，垂直居中对齐

Question

我在 table td 中添加了一个 table。里面的 table td 当它包含更多文本时需要滚动，所以我只是在其中添加了一个 span 并应用了 CSS 属性来限制 height使用 overflow-y: auto

问题是:如何在表格 td 中垂直居中对齐文本？

或者需要应用 vertical-align: middle; 为 "Sub Text"

代码如下:

td {
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ddd;
  border-collapse: collapse;
}

.tbl-small {
  width: 100%;
}

.tbl-small td {
  height: 40px;
  overflow: auto;
}

.tbl-small td span {
  height: 40px;
  width: 100%;
  overflow-y: auto;
  display: block;
  vertical-align: middle;
  text-align: center;
}

<table width="400px;" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td width="25%">Main text</td>
      <td width="25%">
        <table class="tbl-small"  cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td width="25%">
        <table class="tbl-small"  cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td width="25%">Main text</td>
    </tr>
  </tbody>
</table>

JSFiddle: https://jsfiddle.net/vishnuprasadps/5684aupk/

Answer 1

添加 max-height 而不是 height

.tbl-small td span {
  max-height: 40px;
  width: 100%;
  overflow-y: auto;
  display: block;
  vertical-align: middle;
  text-align: center;
}

td {
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ddd;
  border-collapse: collapse;
}

.tbl-small {
  width: 100%;
}

.tbl-small td {
  height: 40px;
  overflow: auto;
}

.tbl-small td span {
  max-height: 40px;
  width: 100%;
  overflow-y: auto;
  display: block;
  vertical-align: middle;
  text-align: center;
}

<table width="400px;" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td width="25%">Main text</td>
      <td width="25%">
        <table class="tbl-small"  cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td width="25%">
        <table class="tbl-small"  cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
            <tr>
              <td><span>Sub text</span></td>
            </tr>
          </tbody>
        </table>
      </td>
      <td width="25%">Main text</td>
    </tr>
  </tbody>
</table>