# 隐藏平板和手机的表格生成器编辑图标？

**URL:** https://meta.discourse.org/t/hiding-edit-icon-of-table-builder-for-tablets-and-mobiles/287216
**Category:** Development
**Tags:** table-builder
**Created:** [2023年十二月1日 18:04 UTC](https://meta.discourse.org/t/hiding-edit-icon-of-table-builder-for-tablets-and-mobiles/287216 "2023-12-01T18:04:48Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2023年十二月1日 18:04 UTC](https://meta.discourse.org/t/hiding-edit-icon-of-table-builder-for-tablets-and-mobiles/287216/1 "2023-12-01T18:04:48Z")

</div>

请各位巫师，我需要一些指导。

表格构建器对手机和平板电脑完全没用，因为它们什么都做不了。因此，表格的编辑图标应该被隐藏。现在它只是令人困惑的噪音。

CSS 是显而易见的工具，因为如果有其他解决方案，它就会被使用，对吧？但我完全不明白如何隐藏那个不必要的铅笔图标。

---

<div class="post-metadata">

### Author: ![jericson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jericson/32/116215_2.png) [@jericson](https://meta.discourse.org/u/jericson)
#### Post date: [2023年十二月1日 19:56 UTC](https://meta.discourse.org/t/hiding-edit-icon-of-table-builder-for-tablets-and-mobiles/287216/2 "2023-12-01T19:56:29Z")

</div>

但这并非理想情况，不过我确实用手机创建了这个表格：

| 列 1 | 列 2 | 列 3 | 列 4 |
| --- | --- | --- | --- |
| 这个表格是在手机上构建的。 | 这并非不可能。双击即可打开键盘。 | | |
| 不知道如何删除多余的行。 | 哦！构建后只需编辑即可。 | | |

删除列需要大量的繁琐编辑，所以我没有这样做。 😉

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2023年十二月1日 22:24 UTC](https://meta.discourse.org/t/hiding-edit-icon-of-table-builder-for-tablets-and-mobiles/287216/3 "2023-12-01T22:24:41Z")

</div>

在 iPad 和 iPhone 上，需要非常快速的双击。但即便如此——在 composer 中进行任何编辑都更容易，并且如果需要添加或删除行等，则无法在 table editor 中完成。

拥有两个不同的编辑器，用户必须根据需要进行的编辑选择使用哪一个，这是一种糟糕的用户体验。因此，小屏幕应该重定向到 composer，为此最简单的方法是隐藏 table editor 的铅笔图标。

这可能是我第一次反对所见即所得类型的设计——也许是因为它太糟糕了。

---

<div class="post-metadata">

### Author: ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [2023年十二月2日 00:03 UTC](https://meta.discourse.org/t/hiding-edit-icon-of-table-builder-for-tablets-and-mobiles/287216/4 "2023-12-02T00:03:58Z")

</div>

这里有一个 CSS 代码片段，您可以使用它来隐藏移动设备上的“编辑表格”按钮：

```css
.mobile-view .fullscreen-table-wrapper:hover .fullscreen-table-wrapper__buttons .btn-edit-table {
  display: none;
  opacity:0;
}

```

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2023年十二月2日 07:01 UTC](https://meta.discourse.org/t/hiding-edit-icon-of-table-builder-for-tablets-and-mobiles/287216/5 "2023-12-02T07:01:53Z")

</div>

非常感谢！\n\n现在我明白了为什么我的尝试不起作用了。嗯，我几乎明白了。为什么是 `opacity:0`？

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [2024年一月1日 07:01 UTC](https://meta.discourse.org/t/hiding-edit-icon-of-table-builder-for-tablets-and-mobiles/287216/6 "2024-01-01T07:01:59Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
