在移动设备上设置复杂的表格 - 无需启动

Question

我需要帮助两个表的CSS响应式样式。 通常我使用Wordpress，非常强调非程序员用户能够轻松编辑页面。我也使用没有bootstrap的主题:(

我希望移动设备看起来如下，而不更改桌面设备。

                 table,head,tbody,th,td,tr {
                display: block;
            }

JSFidlle的链接：

https://jsfiddle.net/682cqzd1/5/

https://jsfiddle.net/24gqc064/