Table 当屏幕尺寸发生语义变化时不完全可见 ui

Question

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

以下 table 的问题是当屏幕尺寸更改为较小的格式时，最后几列不再可见（请参见下面的浏览器图像：header 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>

浏览器结果

如果您更改屏幕宽度超过 table 将翻转为垂直模式。

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

Answer 1

试试你的 css:

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

Answer 2

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

也就是

body{
  overflow-x:scroll !important;
}

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

注意设置为body。将其设置为 container 将使滚动条正好位于 header 下方。由于你想要页面的滚动条，将其设置为 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 3

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

<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>

Answer 4

溢出属性指定内容溢出元素框时发生的情况。

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

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

因此在您的css中：

body{
  overflow-x:scroll;
}

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

Table 当屏幕尺寸发生语义变化时不完全可见 ui

Table not fully visible when screen size changes in semantic ui

html

semantic-ui