Question

我使用html和语义ui创建了一个表（参见下面的html代码）。

下表的问题是当屏幕尺寸更改为较小格式时，最后一列不再可见（请参阅下面的浏览器图片：标题9不再可见）。也没有可用的水平滚动。是否有解决此问题的方法？

HTML

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta charset="utf-8" />

        <link href="semantic.min.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="semantic.min.js"></script>
        <title></title>
    </head>
    <body>
        <div class='ui container'>
            <table class="ui striped selectable celled table" id="overviewtable">
                <thead>
                    <tr>
                        <th>header 1</th>
                        <th>header 2</th>
                        <th>header 3</th>
                        <th>header 4</th>
                        <th>header 5</th>
                        <th>header 6</th>
                        <th>header 7</th>
                        <th>header 8</th>
                        <th>header 9</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>sdfsdqfqdsf qsfqsf qs dqsfdqfdq</td>
                        <td>qsdfdqsfdqsfdfqsf qs dfsq</td>
                        <td>dqfdqsfdsq</td>
                        <td>dsqfqsdf</td>
                        <td>sqdfsqdf</td>
                        <td>sdfsdfqsf</td>
                        <td>dsfqsdfqsdfqsdf</td>
                        <td>sdqfsqdfsd</td>
                        <td>dsqfqsfdqsfsqfqsfdqsf</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

浏览器结果

如果您更改屏幕宽度，表格将翻转为垂直模式。

PS：firefox，chrome和safari中的行为相同。

Answer 1

为body标记指定样式overflow-x:scroll !important;。

那是

body{
  overflow-x:scroll !important;
}

使用!important是因为如果在任何地方设置overflow-x:hidden，则此规则将覆盖它。

请注意，将其设置为body。将其设置为container将在标题下方生成滚动条。由于您需要页面的滚动条，请将其设置为body

**注意：您可以提供scroll或auto

body{
  overflow-x:scroll !important;
}

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta charset="utf-8" />

        <link href="semantic.min.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="semantic.min.js"></script>
        <title></title>
    </head>
    <body>
        <div class='ui container'>
            <table class="ui striped selectable celled table" id="overviewtable">
                <thead>
                    <tr>
                        <th>header 1</th>
                        <th>header 2</th>
                        <th>header 3</th>
                        <th>header 4</th>
                        <th>header 5</th>
                        <th>header 6</th>
                        <th>header 7</th>
                        <th>header 8</th>
                        <th>header 9</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>sdfsdqfqdsf qsfqsf qs dqsfdqfdq</td>
                        <td>qsdfdqsfdqsfdfqsf qs dfsq</td>
                        <td>dqfdqsfdsq</td>
                        <td>dsqfqsdf</td>
                        <td>sqdfsqdf</td>
                        <td>sdfsdfqsf</td>
                        <td>dsfqsdfqsdfqsdf</td>
                        <td>sdqfsqdfsd</td>
                        <td>dsqfqsfdqsfsqfqsfdqsf</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Answer 2

试试你的css：

.ui.container { overflow-x: auto; }

Answer 3

这是我用来正确显示表格的解决方案。

＆＃13;

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta charset="utf-8" />

  <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
  <style>
    .container {
      width: 90% !important;
    }
  </style>
  <title></title>
</head>

<body>
  <div class='ui container'>
    <table class="ui striped selectable celled table" id="overviewtable">
      <thead>
        <tr>
          <th>header 1</th>
          <th>header 2</th>
          <th>header 3</th>
          <th>header 4</th>
          <th>header 5</th>
          <th>header 6</th>
          <th>header 7</th>
          <th>header 8</th>
          <th>header 9</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>sdfsdqfqdsf qsfqsf qs dqsfdqfdq</td>
          <td>qsdfdqsfdqsfdfqsf qs dfsq</td>
          <td>dqfdqsfdsq</td>
          <td>dsqfqsdf</td>
          <td>sqdfsqdf</td>
          <td>sdfsdfqsf</td>
          <td>dsfqsdfqsdfqsdf</td>
          <td>sdqfsqdfsd</td>
          <td>dsqfqsfdqsfsqfqsfdqsf</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

＆＃13;

Answer 4

overflow属性指定当内容溢出元素框时会发生什么。

此属性指定当元素的内容太大而无法放入指定区域时是剪辑内容还是添加滚动条。

注意：overflow属性仅适用于具有指定高度的块元素。

因此你的css：

body{
  overflow-x:scroll;
}

*注意：也尽量不要使用!important，因为它会在以后遇到问题。

当语义ui中的屏幕大小改变时，表不完全可见

4 个答案: