CSS将水平表转换为在移动设备上打破的垂直表

Question

我有一个<nav> - 栏内嵌有<table>栏，用作我网站上的标题，作为我的主导航栏。为了使其对移动设备做出响应，我决定将桌子从水平更改为垂直。然而，在移动本身，这似乎打破了。

在桌面上，它不会有任何额外的CSS，因为它本身工作正常。但是在移动设备上，当然需要进行更改才能将该表从水平方向转换为垂直方式。

为实现这一目标，我只是将<tr>转换为单元格，将<td>转换为向下溢出的块。

table {
    width: 600px;
}

tr {
    display: table-cell;
}

td {
    display: block;
    width: 600px;
    height: 32px;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    float: none;
}

<table>
    <tr>
        <td>Element 1</td>
        <td>Element 2</td>
        <td>Element 3</td>
    </tr>
</table>

在PC上，它看起来是正确的;像这样：

但是，谈到移动设备，看起来更像是这样：

Q值。是否有另一种方法可以在不使用绝对/固定定位的情况下执行此操作，而无需更改基础HTML结构？

如果您不知道我在说什么，visit my site在您的手机和PC上。注意尽管使用相同的HTML结构，它们在视觉上是不同的（虽然目前有些错误）。一个不那么“破碎”的例子是Steam的主页。相同的HTML，不同的CSS。