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

Question

我已经尝试解决此问题 10 天了，但仍然找不到任何解决方案。

我有一张在桌面版上完美显示的表格，但在移动版上它超出了页面区域，我还尝试了@media screen max width 600px 来修改表格的大小并 overflow hidden 但仍然无法正常工作，我会的粘贴以下代码:

<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/table 水平滚动但不会影响页面的布局。在较小的屏幕上将其与减小的字体大小相结合，IMO，您将在移动设备上获得一个非常有用的表格。
3. 有几种方法可以通过使用 data-title 上的数据属性(如 <td> )来修改表格在小屏幕上的呈现方式。和 <th>复制列标题，以便在小屏幕上您可以使用 ::before 提取数据属性类似 td::before { content: attr(data-title); } 的伪元素并告诉你的表格元素都是 display: block;并为它们设置样式，就像每一行都是它自己的表格。
   这是 CSS 技巧中的示例:https://css-tricks.com/responsive-data-tables/