时间戳

首页 > 解决方案 > 在我的网站的移动版本上显示表格时出现问题

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

问题描述

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

我有一个在桌面版本上完美显示的表格，但在移动设备上它超出了页面区域，我还尝试@media screen max width 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>

标签： cssmobile

解决方案

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

  1. 如果您将其用于布局，我建议您flexbox改为探索布局。
  2. 如果您计划在表格中包含更多行，您可以将表格包装在一个<div>withmax-width: 100%; overflow: auto;中，这将允许 div/table 水平滚动但不会影响页面的布局。在较小的屏幕上将其与减小的字体大小配对，IMO，您会在移动设备上获得一个非常实用的表格。
  3. 有一些方法可以通过使用data-title数据属性<td>（如所有的表格元素和样式它们有点像每一行都是它自己的表格。 这是 CSS Tricks 的一个示例：https ://css-tricks.com/responsive-data-tables/<th>::beforetd::before { content: attr(data-title); }display: block;

推荐阅读