Overflow property isn't having an effect despite stated width and height. (Bootstrap & Slim)

Question

I have a table, in which I want to ensure that the cells do not expand when large amounts of text are inserted. I've set a width and height, and overflow to hidden, but the height property is having no effect, overflow is also not working. Changing the width however visibly alters the cell.

Where am I going wrong here?

Code:

table.table.table-striped 
thead.bg-white
  tr
    th = t('panel.case_file.show.actor')
    th = t('panel.case_file.show.event')
    th = t('panel.case_file.show.state')
tbody.activities
      td.event
        == event_details_text
       

styling:

  td.event {
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

Answer 1

Large amount of text will make the expand for sure.

You can try overflow: scroll instead of overflow: hidden,

And then set a fixed width and height to the s.