在我的网站的移动版本上显示表格时出现问题

Question

我一直试图解决这个问题10天了，但我仍然无法找到任何解决方案。

我有一个表在桌面版上完美显示，但在移动设备上它离开页面区域，我也尝试@media屏幕最大宽度600px修改表的大小和溢出隐藏但仍然无法正常工作，我将粘贴代码下面：

<style type="text/css">
    table {
        border-collapse: collapse;
        width: 100%;
    }

    td {
        border: 1px solid #d3d3d3;
        text-align: center;
        white-space: nowrap;
    }

    th {
        background-color: #0288D1;
        border: 2px solid #d3d3d3;
        text-align: center;
        font-size: large;
        color: white;
        text-transform: uppercase;
    }
</style>

<table>
    <thead>
        <tr>
            <th colspan="4" style="background-color:#0277BD"><strong>Some Text Here<strong></th></tr>
<tr>
<th><strong>Some Text Here</strong></th>
            <th><strong>Some Text Here</strong></th>
            <th><strong>Some Text Here</strong></th>
            <th></th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td>
                <a rel="nofollow" target="_blank" href="https://somesite.com/play"><img width="200" height="80" src="https://somesite.com/image.png" alt="Some Text Here"></a>
            </td>

            <td><strong><font color="green">Some Text Here</font></strong></td>
            <td>Some Text Here</td>

            <td>
                <div>
                    <button class="playblock" style="display:block;width:150px;height:50px;background-color:#4CAF50;margin-bottom:5px;color:white;font-size:20px;cursor:pointer;text-align:center;" onmouseover="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='#4CAF50'" onclick="window.location.href = 'https://somesitehere.com/play';">PLAY</button>
                </div>

                <div>
                    <button class="reviewblock" style="display:block;width:150px;height:50px;background-color:#EB9C12;color:white;font-size:20px;cursor:pointer;text-align:center;" onmouseover="this.style.backgroundColor='orange'" onMouseOut="this.style.backgroundColor='#EB9C12'" onclick="window.location.href = 'https://somesitehere.com/see/';">REVIEW</button>
                </div>
            </td>
        </tr>

Answer 1

这是移动桌面的常见问题。目前尚不清楚您是否使用该表进行布局，或者您是否将使用Play和Review链接获得更多数据行。

1. 如果你使用它进行布局，我建议改为探索flexbox布局。
2. 如果您计划在表中包含更多行，则可以使用<div>将表包装在max-width: 100%; overflow: auto;中，这样可以使div /表水平滚动，但不会影响页面的布局。在较小的屏幕上将其与减小的字体大小配对，而IMO，您可以在移动设备上获得一个非常实用的表格。
3. 通过在data-title和<td>上复制列标题的数据属性（如<th>）修改表在小屏幕上呈现的方法有一些方法，以便在小屏幕上可以使用::before伪元素提取数据属性像td::before { content: attr(data-title); }，并告诉你的表格元素都是display: block;和造型他们有点像每一行是它自己的表。 以下是CSS Tricks的一个例子：https://css-tricks.com/responsive-data-tables/

Answer 2

你必须决定它在移动设备上应该是什么样子。简单的解决方法是在桌面上设置最小宽度，但这可能会在移动设备上变小。您还应该使用媒体查询来缩小按钮，它们非常大。

table { min-width: 500px; }

Answer 3

在overflow-x:auto周围添加一个带<table>的容器元素，例如：

<div style="overflow-x:auto;">
     <table>
         ...
     </table>
</div>

如果屏幕太小而无法显示完整内容，则此表将显示水平滚动条。

Answer 4

感谢您的所有反馈。

经过一些测试后我自己修复了：

@media only screen and (max-width: 800px) { ... }