Table td with overflow scroll

by Vishnuprasad ps

HTML

<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>

CSS

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;
}