スライダーで表の置き場所の幅を変えてください。520pxを切ると行がカードに畳まれます。判断しているのは画面幅ではなく親要素の幅なので、同じ表をサイドバーに置いても正しく振る舞います。

display: block にすると、ブラウザ内部での「表」としての扱いが失われます。role="table" から role="cell" まで書き足して、意味だけは元のまま保つのがこの手法の必須条件です。