Making a list horizontally and vertically scrollable

Question

I have a table, where each cell has a vertical list. However, some cells have text that is horizontally too wide, so I want it to be horizontally scrollable inside the list div.

I have tried something like this, but that gives me only the vertically scrollable list, but horizontally is my content not scrollable.

ol {
  height: 160px;

  overflow-y: auto;
  overflow-x: auto;
}

td {
  height: 200px;
}


li {
  padding-bottom: 5px;
  width: 95%;
}

How do I make the content of my list (each list item) horizontally scrollable where needed?

Answer 1

A code sample would be great, but regardless, here's a sample that allows vertical and horizontal scrolling inside a table cell. (Did I understand your requirements correctly?)

 td { max-width:100px; max-height:100px; overflow-y: auto; overflow-x: auto; display:block; } li { white-space: nowrap; } 

 <table><tr><td> <ul> <li>Foobar testklst tesjktl tjekslt tjkeslt tekljst tjesklt</li> <li>Foobar ljfse selfjse lfjase asliejfasj as asefklj</li> <li>Foobar ljfse selfjse lfjase asliejfasj as asefklj</li> <li>Foobar ljfse selfjse lfjase asliejfasj as asefklj</li> <li>Foobar ljfse selfjse lfjase asliejfasj as asefklj</li> <li>Foobar ljfse selfjse lfjase asliejfasj as asefklj</li> <li>Foobar ljfse selfjse lfjase asliejfasj as asefklj</li> </ul> </td></tr></table>