How to fix one of the columns in dataview table while others are horizontally scrollable?

Custom CSS & Theme Design
,
1

What I’m trying to do

I am trying to create a table where the first column is fixed. Meaning when there are too many columns and I have to scroll horizontally the first column should not go out of sight.

table without id
	file.link AS "Day",
	choice(x,"✅","❌") AS 🪥,
	choice(y,"✅","❌") AS 🚿,
	choice(z,"✅","❌") AS 📚,
	choice(p,"✅","❌") AS 🥜,
	choice(q,"✅","❌") AS 🤐,
	choice(r,"✅","❌") AS 🙊,
	choice(m,"✅","❌") AS 🧹,
	choice(o,"✅","❌") AS 📊
from "Daily Notes/2024/February"
sort file.name ASC

Here, I want the first column file.link AS “Day” to stay always visible.

Things I have tried

I tried to use chatgpt, gemini to find an answer. It answered with some css:

.fixed-column-table {
  overflow-x: auto;
  display: flex;
}

.fixed-column-table .table th:first-child,
.fixed-column-table .table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #fff; /* Adjust as needed */
}

.fixed-column {
  width: fit-content; /* Ensures column width adjusts dynamically */
}

and told me to add it to custom css. I did and the dataview table were given like this:

table without id
  cssclass "fixed-column-table"
  file.link AS "Day" class="fixed-column",
  choice(x,"✅","❌") AS 🪥,
  choice(y,"✅","❌") AS  🚿
from "Daily Notes/2024/February"
sort file.name ASC

This did not work. If anyone could help me with this I would greatly appreciate it.

2

You could try to user some of this:

1 Like
3

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