# CSS help needed for table formatting in Julia package

**URL:** <https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559>\
**Category:** Offtopic\
**Tags:** question\
**Created:** [October 20, 2018, 10:04am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559 "2018-10-20T10:04:08Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [October 20, 2018, 10:04am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/1 "2018-10-20T10:04:08Z")

</div>

I am working on a Julia package that supports the [Tables.jl](https://github.com/JuliaData/Tables.jl) interface. It does one thing: given a table, it formats it into HTML for browsing:

> **[GitHub - tpapp/BrowseTables.jl: Julia package for browsing tables that that...](https://github.com/tpapp/BrowseTables.jl)**
>
> Julia package for browsing tables that that implement the Tables.jl interface as HTML. - GitHub - tpapp/BrowseTables.jl: Julia package for browsing tables that that implement the Tables.jl interfac...

I would like to implement the following in CSS: for large tables, have the header (`<thead>`) fixed at the top of the screen, and the table body (`<tbody>`) scrollable if it does not fit on the screen. I am looking for a pure CSS solution, no JS. As simple as possible, with reasonable browser support (or a sensible fallback).

Help in the form of a PR would be appreciated. (I of course tried searching online, but ended up with so many options, many of which did not work, that I gave up for now).

---

<div class="post-metadata">

**Author:** ![y4lu](https://avatars.discourse-cdn.com/v4/letter/y/47e85d/32.png) [@y4lu](https://discourse.julialang.org/u/y4lu)\
**Post date:** [October 20, 2018, 11:01am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/2 "2018-10-20T11:01:47Z")

</div>

It’s a little rough, but not too bad for a quick answer  
tested on firefox [here](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_tbody)

```julia
<style>
thead {position:fixed; color:green; background-color:white; z-index:10}
tbody {color:blue; position:relative; top:2em;}
tfoot {color:red; position:relative; top:2em;}
table {padding: 0 0 2em 0} //2em is a little bit nicer

thead th {width:5em;} // set some minimum widths
tbody td {width:5em;}

```

I think it looks ok, simple and perfect with css isn’t too easy

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [October 20, 2018, 12:25pm UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/3 "2018-10-20T12:25:21Z")

</div>

Thanks, but I am not looking for the “rough” solution, I found plenty of those online.

I can accept if there is no clean solution (in the sense of something that does not rely on fixed dimensions for elements, JS, browser-specific hacks, etc), then I just don’t implement this feature — so that would also be useful information.

---

<div class="post-metadata">

**Author:** ![piever](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/piever/32/1815_2.png) [@piever](https://discourse.julialang.org/u/piever)\
**Post date:** [October 20, 2018, 1:27pm UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/4 "2018-10-20T13:27:45Z")

</div>

Have you seen [TableView](https://github.com/JuliaComputing/TableView.jl)? @pfitzseb is working on a new and improved version so you could use that instead. Not sure whether there are strong reason to prefer HTLM table versus “excel style”.

As for your question, all solutions seem a bit hacky so it may be better to simply rely on a js library for more advanced table rendering.

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [October 20, 2018, 1:30pm UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/5 "2018-10-20T13:30:56Z")

</div>

I came to the conclusion that this is [not possible](https://stackoverflow.com/a/47739690) at the moment. I will just keep the header at the top.

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [October 20, 2018, 1:33pm UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/6 "2018-10-20T13:33:30Z")

</div>

> [@piever](#):
>
> Have you seen [TableView](https://github.com/JuliaComputing/TableView.jl)?

I think that is something different (if I understand correctly).

I just need a very compact _view_ of a table supported by Tables.jl, no editing (in fact, the Tables.jl interface does not require/support modification).

(_Also, after the long upgrade period to JuliaDB.jl, I am wary of using anything from JuliaComputing for production._)

---

<div class="post-metadata">

**Author:** ![piever](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/piever/32/1815_2.png) [@piever](https://discourse.julialang.org/u/piever)\
**Post date:** [October 20, 2018, 3:25pm UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/7 "2018-10-20T15:25:57Z")

</div>

TableView does not actually support editing (which indeed is a bit confusing as you can edit the field in the spreadsheet but that has no effect on the underlying Julia data). I had created a TableWidgets package for this (that I can’t upgrade yet as it depends on JuliaDB), but I was wondering whether it’d be better to do a more lighweight version of generally useful widgets for tables (for display / filtering / manipulations) that only depends on basic packages .

---

<div class="post-metadata">

**Author:** ![y4lu](https://avatars.discourse-cdn.com/v4/letter/y/47e85d/32.png) [@y4lu](https://discourse.julialang.org/u/y4lu)\
**Post date:** [October 21, 2018, 1:42am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/8 "2018-10-21T01:42:40Z")

</div>

So to make the table scrollable instead of the page, you can wrap in a div and use

```julia
.divstyle{ position:relative; overflow-y:scroll; overflow-x:auto; max-height:90vh;
   border: 2px solid black; }

```

You could combine this with a seperate header table instead of using position:fixed on the top row  
It would be pretty nice to have a css column toggle/select but that one might just be easier on the julia side

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [October 21, 2018, 6:39am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/9 "2018-10-21T06:39:08Z")

</div>

Again, I am at the limits of my knowledge of CSS, PRs are welcome.

---

<div class="post-metadata">

**Author:** ![pfitzseb](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/pfitzseb/32/45566_2.png) [@pfitzseb](https://discourse.julialang.org/u/pfitzseb)\
**Post date:** [October 21, 2018, 9:46am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/10 "2018-10-21T09:46:32Z")

</div>

[My PR](https://github.com/JuliaComputing/TableView.jl/pull/6) to TableViews doesn’t include any editing capabilities and should soon be a pretty good option to display arbitrarily large datasets.  
A non-JS fallback might be useful – do note that it’s usually not a good idea to display many (\> 500 maybe?) rows in pure HTML though so it’d probably be good to limit the number of displayable rows.

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [October 21, 2018, 10:31am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/11 "2018-10-21T10:31:38Z")

</div>

> [@pfitzseb](#):
>
> note that it’s usually not a good idea to display many (\> 500 maybe?) rows in pure HTML

I just tried `100_000` rows with BrowseTables.jl, and it displays just fine in about 2 seconds (Firefox 64.0b2, Linux, just a normal 3-year old laptop, I have about 30 other tabs open). This is precisely why I am keeping it simple, with a relatively clean HTML.

---

<div class="post-metadata">

**Author:** ![y4lu](https://avatars.discourse-cdn.com/v4/letter/y/47e85d/32.png) [@y4lu](https://discourse.julialang.org/u/y4lu)\
**Post date:** [October 21, 2018, 11:18am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/12 "2018-10-21T11:18:26Z")

</div>

I made a pr, here is a demo of the output  
https://codepen.io/anon/embed/preview/oayRjO?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=oayRjO

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [October 21, 2018, 11:20am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/13 "2018-10-21T11:20:16Z")

</div>

Thanks, but unfortunately the rows and the header look misaligned:  
 ![table](https://global.discourse-cdn.com/julialang/original/3X/7/4/745fee84383e56e6c68627395cc111bbe7d93a90.png)

---

<div class="post-metadata">

**Author:** ![y4lu](https://avatars.discourse-cdn.com/v4/letter/y/47e85d/32.png) [@y4lu](https://discourse.julialang.org/u/y4lu)\
**Post date:** [October 21, 2018, 12:10pm UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/14 "2018-10-21T12:10:52Z")

</div>

Seems to be a side effect of the different position: type. It’s quite easy to set all the widths larger than the longest probable header field but it loses out on compactness.

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [October 21, 2018, 12:21pm UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/15 "2018-10-21T12:21:08Z")

</div>

> [@y4lu](#):
>
> larger than the longest probable header field

This is impossible to know in advance. Also, compactness is a priority. Thanks for the PR but I think I will keep the package as is.

---

<div class="post-metadata">

**Author:** ![y4lu](https://avatars.discourse-cdn.com/v4/letter/y/47e85d/32.png) [@y4lu](https://discourse.julialang.org/u/y4lu)\
**Post date:** [October 22, 2018, 2:37am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/16 "2018-10-22T02:37:53Z")

</div>

> github: You can’t comment at this time. -Posting here instead

It did make visible a few other glitches with the position:fixed approach, and could be handy for database-like linked tables. I’m not super-familiar with how github does it’s pr’s and branch merges yet, so that was a little unexpected. Any thoughts on the Scrolltables.css approach?

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [October 22, 2018, 5:36am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/17 "2018-10-22T05:36:03Z")

</div>

Github is apparently experiencing a problem, I am seeing this too in other repos (I got a message that you closed the PR, but it is still open). I hope this is not becoming [systematic](https://discourse.julialang.org/t/microsoft-will-acquire-github/11406).

Regarding the PR: as I commented on it there, I am reluctant to specify width manually, as it would sacrifice compactness. Lacking that, I think the misalignment remains, isn’t that so? Also, I don’t want multiple tables in a file, that’s what browser tabs are for.

---

<div class="post-metadata">

**Author:** ![y4lu](https://avatars.discourse-cdn.com/v4/letter/y/47e85d/32.png) [@y4lu](https://discourse.julialang.org/u/y4lu)\
**Post date:** [October 22, 2018, 6:55am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/18 "2018-10-22T06:55:21Z")

</div>

Misalignment is fixed by position:sticky, and the widths are still there but seem to shrink when required in firefox at least (~30 cols with short headers and data -expanded to 49 - shrunk). I think we’re both happy enough with our seperate versions

---

<div class="post-metadata">

**Author:** ![Tamas\_Papp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tamas_papp/32/25949_2.png) [@Tamas\_Papp](https://discourse.julialang.org/u/Tamas_Papp)\
**Post date:** [December 5, 2018, 6:41am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/19 "2018-12-05T06:41:16Z")

</div>

Thanks for your help, I have released and announced the package. Now with fixed footers, too! 🎉

> [@ANN: BrowseTables.jl](https://discourse.julialang.org/t/ann-browsetables-jl/18304):
>
> [BrowseTables.jl](https://github.com/tpapp/BrowseTables.jl) is a simple package that outputs formatted HTML for tables that support the [Tables.jl](https://github.com/JuliaData/Tables.jl) interface. The primary purpose of the package is to make eyeballing medium-sized data tables easier. The default formatting uses a fairly condensed font and layout, while still remaining readable. I would like to thank @y4lu for help with CSS. Demo Install with pkg\> add BrowseTables. Then using BrowseTables table = (A = rand(vcat(1:10, missing), 100), B = rand(vcat('a':'h', missing)…

---

<div class="post-metadata">

**Author:** ![y4lu](https://avatars.discourse-cdn.com/v4/letter/y/47e85d/32.png) [@y4lu](https://discourse.julialang.org/u/y4lu)\
**Post date:** [December 5, 2018, 9:21am UTC](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559/20 "2018-12-05T09:21:51Z")

</div>

Looks good =)

I just had a thought for very wide tables, you could probably use the sticky trick again with left:0 on the row\_id columns. Maybe something for the next release

You’re quite welcome, hit us up if there’s any other css you get stuck with

[Next page](https://discourse.julialang.org/t/css-help-needed-for-table-formatting-in-julia-package/16559.md?page=2)