# Horizontal scroll bar for wide tables?

**URL:** https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360
**Category:** UX
**Created:** [September 19, 2017, 12:48pm UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360 "2017-09-19T12:48:36Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [September 19, 2017, 12:48pm UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/1 "2017-09-19T12:48:36Z")

</div>

How about a horizontal scroll bar for posts with wide tables? See for example this one:

> **[Benchmarking different storage providers](https://forum.duplicati.com/t/benchmarking-different-storage-providers/601/37?u=tophee)**
>
> No problem - inline table as noted. Pretty much done with the testing now. Conclusions (with commentary on cost side) If backing up moderate data sets (less than 1 TB) then B2 would be most economical. Speed is not bad (aside from one major...

Or is there any other way of getting that table diaplayed?

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [September 19, 2017, 3:27pm UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/2 "2017-09-19T15:27:27Z")

</div>

We need to change the HTML generation to wrap the table in a horizontal-scrollable `<div>`. This is probably a good idea in general.

---

<div class="post-metadata">

### Author: ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [September 24, 2017, 9:12am UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/3 "2017-09-24T09:12:01Z")

</div>

Just so that I understand correctly: this is nothing I can do as an admin, right? This requires coding in core, no?

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [September 24, 2017, 3:57pm UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/4 "2017-09-24T15:57:42Z")

</div>

the thing is, a simple `<div style="overflow-x:scroll">YOUR LARGE TABLE</div>` would make it work, but the style will get removed when cooked, I think you would need a plugin to allow this on div (or allow a specific css class which would be better).

Basically it would mean having a helper which would have something like this:

```plaintext
export function setup(helper) {
  helper.whiteList(['div.horizontal-table']);
}

```

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [September 25, 2017, 7:08am UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/5 "2017-09-25T07:08:37Z")

</div>

Yeah I support changing core to `div` wrap tables, then it will be trivial to correct this using CSS. As it stands I do not think there is a simple CSS workaround.

@awesomerobot is div wrapping required for tables to get overflow scroll or is there some black magic I am missing?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [September 25, 2017, 1:38pm UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/6 "2017-09-25T13:38:47Z")

</div>

Yeah wrapping tables in a div and adding `overflow: auto;` to that div is the simplest way

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 13, 2017, 6:34am UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/8 "2017-11-13T06:34:58Z")

</div>

Example problem table is here:

```plaintext
| Provider | Local | HubiC | Mega | Onedrive | Google | pcloud | Backblaze B2 | Box (WebDav) | pcloud (virtual) | | Jotta | Box |
|------------------|-------|-------|------|----------|--------|--------|--------------|--------------|------------------|---|-------|------|
| Count | 36 | 35 | 35 | 35 | 35 | 35 | 35 | 32 | 18 | | 30 | 9 |
| Avg | 0:03 | 1:24 | 0:41 | 0:31 | 0:32 | 0:30 | 0:34 | 0:21 | 0:02 | | 1:28 | 2:43 |
| Rank | 2 | 9 | 8 | 5 | 6 | 4 | 7 | 3 | 1 | | 10 | 11 |
| StdDev | 0:03 | 0:47 | 0:20 | 0:21 | 0:22 | 0:30 | 0:20 | 0:07 | 0:03 | | 0:33 | 0:30 |
| 95% Perc | 0:11 | 2:57 | 1:20 | 1:14 | 1:16 | 1:30 | 1:14 | 0:36 | 0:09 | | 2:34 | 3:43 |
| Rank | 2 | 10 | 7 | 4 | 6 | 8 | 5 | 3 | 1 | | 9 | 11 |
| | | | | | | | | | | | | |
| Include Outliers | | | | | | | | | | | | |
| | | | | | | | | | | | | |
| Provider | Local | HubiC | Mega | Onedrive | Google | pcloud | Backblaze B2 | Box (WebDav) | pcloud (virtual) | | Jotta | Box |
| Count | 36 | 36 | 37 | 36 | 35 | 38 | 38 | 35 | 18 | | 37 | 9 |
| Avg | 0:03 | 1:28 | 0:50 | 0:34 | 0:32 | 0:43 | 1:17 | 0:31 | 0:02 | | 2:55 | 2:43 |
| Rank | 2 | 9 | 7 | 5 | 4 | 6 | 8 | 3 | 1 | | 11 | 10 |
| StdDev | 0:03 | 0:50 | 0:44 | 0:25 | 0:22 | 0:53 | 3:40 | 0:35 | 0:03 | | 3:39 | 0:30 |
| 95% Perc | 0:11 | 3:06 | 2:18 | 1:23 | 1:16 | 2:29 | 8:29 | 1:41 | 0:09 | | 10:05 | 3:43 |
| Rank | 2 | 8 | 6 | 4 | 3 | 7 | 10 | 5 | 1 | | 11 | 9 |

```

| Provider | Local | HubiC | Mega | Onedrive | Google | pcloud | Backblaze B2 | Box (WebDav) | pcloud (virtual) | | Jotta | Box |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Count | 36 | 35 | 35 | 35 | 35 | 35 | 35 | 32 | 18 | | 30 | 9 |
| Avg | 0:03 | 1:24 | 0:41 | 0:31 | 0:32 | 0:30 | 0:34 | 0:21 | 0:02 | | 1:28 | 2:43 |
| Rank | 2 | 9 | 8 | 5 | 6 | 4 | 7 | 3 | 1 | | 10 | 11 |
| StdDev | 0:03 | 0:47 | 0:20 | 0:21 | 0:22 | 0:30 | 0:20 | 0:07 | 0:03 | | 0:33 | 0:30 |
| 95% Perc | 0:11 | 2:57 | 1:20 | 1:14 | 1:16 | 1:30 | 1:14 | 0:36 | 0:09 | | 2:34 | 3:43 |
| Rank | 2 | 10 | 7 | 4 | 6 | 8 | 5 | 3 | 1 | | 9 | 11 |
| | | | | | | | | | | | | |
| Include Outliers | | | | | | | | | | | | |
| | | | | | | | | | | | | |
| Provider | Local | HubiC | Mega | Onedrive | Google | pcloud | Backblaze B2 | Box (WebDav) | pcloud (virtual) | | Jotta | Box |
| Count | 36 | 36 | 37 | 36 | 35 | 38 | 38 | 35 | 18 | | 37 | 9 |
| Avg | 0:03 | 1:28 | 0:50 | 0:34 | 0:32 | 0:43 | 1:17 | 0:31 | 0:02 | | 2:55 | 2:43 |
| Rank | 2 | 9 | 7 | 5 | 4 | 6 | 8 | 3 | 1 | | 11 | 10 |
| StdDev | 0:03 | 0:50 | 0:44 | 0:25 | 0:22 | 0:53 | 3:40 | 0:35 | 0:03 | | 3:39 | 0:30 |
| 95% Perc | 0:11 | 3:06 | 2:18 | 1:23 | 1:16 | 2:29 | 8:29 | 1:41 | 0:09 | | 10:05 | 3:43 |
| Rank | 2 | 8 | 6 | 4 | 3 | 7 | 10 | 5 | 1 | | 11 | 9 |

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 13, 2017, 6:52am UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/9 "2017-11-13T06:52:46Z")

</div>

Complete per:

[https://github.com/discourse/discourse/commit/8a6644684924fd5388aec1bc2125f958afe3de1e](https://github.com/discourse/discourse/commit/8a6644684924fd5388aec1bc2125f958afe3de1e)

---

<div class="post-metadata">

### Author: ![schungx](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/schungx/32/70989_2.png) [@schungx](https://meta.discourse.org/u/schungx)
#### Post date: [November 13, 2017, 10:10am UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/12 "2017-11-13T10:10:26Z")

</div>

I am pretty sure for horizontal scrollable tables you need overflow-x instead of overflow-y…

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [November 13, 2017, 10:18am UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/13 "2017-11-13T10:18:55Z")

</div>

Hmm yeah @sam did we mix up our X’s and Y’s here? 😉

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/0/b079391f1f0fb7921a64b9ad7e070a0a0f5fe916.png)

---

<div class="post-metadata">

### Author: ![vinothkannans](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vinothkannans/32/86465_2.png) [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [November 13, 2017, 10:46am UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/14 "2017-11-13T10:46:34Z")

</div>

| Provider | Local | HubiC | Mega | Onedrive | Google | pcloud | Backblaze B2 | Box (WebDav) | pcloud (virtual) | | Jotta | Box |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Count | 36 | 35 | 35 | 35 | 35 | 35 | 35 | 32 | 18 | | 30 | 9 |
| Avg | 0:03 | 1:24 | 0:41 | 0:31 | 0:32 | 0:30 | 0:34 | 0:21 | 0:02 | | 1:28 | 2:43 |
| Rank | 2 | 9 | 8 | 5 | 6 | 4 | 7 | 3 | 1 | | 10 | 11 |
| StdDev | 0:03 | 0:47 | 0:20 | 0:21 | 0:22 | 0:30 | 0:20 | 0:07 | 0:03 | | 0:33 | 0:30 |
| 95% Perc | 0:11 | 2:57 | 1:20 | 1:14 | 1:16 | 1:30 | 1:14 | 0:36 | 0:09 | | 2:34 | 3:43 |
| Rank | 2 | 10 | 7 | 4 | 6 | 8 | 5 | 3 | 1 | | 9 | 11 |
| | | | | | | | | | | | | |
| Include Outliers | | | | | | | | | | | | |
| | | | | | | | | | | | | |
| Provider | Local | HubiC | Mega | Onedrive | Google | pcloud | Backblaze B2 | Box (WebDav) | pcloud (virtual) | | Jotta | Box |
| Count | 36 | 36 | 37 | 36 | 35 | 38 | 38 | 35 | 18 | | 37 | 9 |
| Avg | 0:03 | 1:28 | 0:50 | 0:34 | 0:32 | 0:43 | 1:17 | 0:31 | 0:02 | | 2:55 | 2:43 |
| Rank | 2 | 9 | 7 | 5 | 4 | 6 | 8 | 3 | 1 | | 11 | 10 |
| StdDev | 0:03 | 0:50 | 0:44 | 0:25 | 0:22 | 0:53 | 3:40 | 0:35 | 0:03 | | 3:39 | 0:30 |
| 95% Perc | 0:11 | 3:06 | 2:18 | 1:23 | 1:16 | 2:29 | 8:29 | 1:41 | 0:09 | | 10:05 | 3:43 |
| Rank | 2 | 8 | 6 | 4 | 3 | 7 | 10 | 5 | 1 | | 11 | 9 |

But magically it is working. For both `overflow-x` and `overflow-y`. I think `overflow-x` assigned to `auto` automatically when we set `overflow-y: auto`🤔

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [November 13, 2017, 11:08am UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/15 "2017-11-13T11:08:44Z")

</div>

We should still fix the commit.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 14, 2017, 7:00am UTC](https://meta.discourse.org/t/horizontal-scroll-bar-for-wide-tables/70360/16 "2017-11-14T07:00:24Z")

</div>

This topic was automatically closed after 24 hours. New replies are no longer allowed.