Overflow:Scroll; in <Td>

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>

scroll bar for a table cell

Yes you can do that.

The easiest way is to put inside your cell a div filling it and set its overflow style property.

CSS :

div.scrollable {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

HTML :

<td><div class=scrollable>
    Some content with a scrollbar if it's too big for the cell
</div></td>

If you want the scrollbar to be always visible, even when the content isn't cropped, replace auto with scroll in the CSS.

Demonstration

How to set tbody height with overflow scroll

If you want tbody to show a scrollbar, set its display: block;.

Set display: table; for the tr so that it keeps the behavior of a table.

To evenly spread the cells, use table-layout: fixed;.

DEMO

CSS:

table, tr td {
    border: 1px solid red
}
tbody {
    display: block;
    height: 50px;
    overflow: auto;
}
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width: 400px;
}

If tbody doesn't show a scroll, because content is less than height or max-height, set the scroll any time with: overflow-y: scroll;. DEMO 2

<editS/updateS> 2019 - 04/2021

• Important note: this approach to making a table scrollable has drawbacks in some cases. (See comments below.) some of the duplicate answers in this thread deserves the same warning by the way

WARNING: this solution disconnects the thead and tbody cell grids; which means that in most practical cases, you will not have the cell alignment you expect from tables. Notice this solution uses a hack to keep them sort-of aligned: thead { width: calc( 100% - 1em ) }

• Anyhow, to set a scrollbar, a display reset is needed to get rid of the table-layout (which will never show scrollbar).

• Turning the <table> into a grid via display:grid/contents will also leave a gap in between header and scrollable part, to mind about. (idem if built from divs)

• overflow:overlay; has not yet shown up in Firefox ( keep watching it)

• position:sticky will require a parent container which can be the scrolling one. make sure your thead can be sticky if you have a few rows and rowspan/colspan headers in it (it does not with chrome).

So far, there is no perfect solution yet via CSS only. there is a few average ways to choose along so it fits your own table (table-layout:fixed; is .. fixing table and column's width, but javascript could probably be used to reset those values => exit pure CSS)

Table Width 100% with Overflow Scroll

You can't do it by changing display alone for the table, but there are a couple of ways you can achieve this.

1. Add a "scrolling" container div

You can up the standard table in a container div and give it the overflow: auto;, so it will have the scroll bar.

table          { width: 100%; }
.scrollwrapper { overflow: auto; }

This means the table will stretch to at least 100% of the width even if it is not wide enough on its own, and if the content makes it wider than 100% them the div gets a scrollbar.

Working Example:

table {
  width: 100%;
  border: 1px solid blue;
}

.scrollwrapper {
  overflow: auto;
}

td {
  border: 1px solid #aaa;
}

<h3>Scrolling Wrapper - Wide Table</h3>

<div class="scrollwrapper">
  <table>
    <tr>
      <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
      <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
      <td>thisisoneverylongwordthatwillnotwrapinthetablecell</td>
    </tr>
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra.</td>
    </tr>
  </table>
</div>

<h3>Scrolling Wrapper - Narrow Table</h3>

<div class="scrollwrapper">
  <table>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
    </tr>
    <tr>
      <td>Short text</td>
      <td>Short text</td>
      <td>Short text</td>
    </tr>
  </table>
</div>

<td class="blog_content">
    <div><?php echo $blog['content']; ?></div>
</td>

.blog_content div {
    height: 50px;
    max-height: 50px;
    overflow: auto;
}