语义 UI table 内卡宽度

Question

我正在尝试使用 Semantic-UI:

构建一个垂直的卡片面板，如果大于屏幕，它将打开垂直滚动条

我来到了以下 HTML 代码：

<div className="ui fluid container">
  <div className="Panel">
        <div className="ui card">
          <div className="content">
            <div className="header">CARD 1
            </div>
            <div className="content">
              <table className="ui celled striped compact table">
                <thead>
                  <tr>
                    <th>Ref</th>
                    <th>Item</th>
                    <th>Qty</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="center aligned">ABC123</td>
                    <td className="left aligned">Item ABC123 Description 1</td>
                    <td className="center aligned">86</td>
                  </tr>
                  <tr>
                    <td className="center aligned">DEF456</td>
                    <td className="left aligned">Item DEF456 Description 2</td>
                    <td className="center aligned">222</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
  </div>
</div>

我的 .css 文件：

.Panel {
  min-width: 800px;
  max-height: calc(100vh - 70px); 
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

由于我的面板设置，table横向溢出卡，如下图：

如果我删除我的面板设置，一切正常，但我需要这些设置用于卡片容器（面板）。

是什么导致我的 table 溢出？

Answer 1

尝试使用 ui segment 而不是 ui card ，这可以在不更改面板设置的情况下解决溢出问题。对于垂直滚动条，将 css 更改为：

.Panel {
  max-height: calc(100vh - 70px); 
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  max-width:350px
}

这是一个有效的 Demo

PS：有时线段不会垂直，除非您将 ui segment 更改为 ui vertical segment docs

语义 UI table 内卡宽度

Semantic UI table inside card width

html

css

semantic-ui