Table layout dynamically changes width according to its content. But it loses control if the width of the content is wider than the table column even if you give the table a fixed width or max-width property. The {table-layout: fixed;} solves this problem well.
Set {table-layout: fixed} to the table and give percentage width to td and th. Then we can still keep the dynamic width. The table width is no more expanded and {overflow: hidden} works well to td too.
See the Pen AcuKa by Oliver - Frontend Developer (@Oliverl) on CodePen.