/    Sign up×
Community /Pin to ProfileBookmark

How do I control the column width in a table?

Copy linkTweet thisAlerts:
Mar 10.2021

I want a table with a fixed thead and a scrollable tbody. Doing so I lost the ability to set the column width for some reason.
How do I control the column width?

https://jsfiddle.net/17n08utc/12/

to post a comment
CSS

15 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumMar 10.2021 — Why `display: table;` for thead and tfoot? If I remove this, the cells are respecting the width.
Copy linkTweet thisAlerts:
@sibertauthorMar 10.2021 — > @Sempervivum#1629138 If I remove this, the cells are respecting the width.

I did remove this, but it looks even more weird. Did I miss something?

https://jsfiddle.net/e2mzg750/
Copy linkTweet thisAlerts:
@sibertauthorMar 11.2021 — I found one solution. Is there any better?

``<i>
</i>th:nth-child(1),
td:nth-child(1) {
width: 30px;
}

th:nth-child(2),
td:nth-child(2) {
width: 500px;
}<i>
</i>``

http://jsfiddle.net/5yoqv4fd/12/
Copy linkTweet thisAlerts:
@SempervivumMar 11.2021 — Fine that you found a solution now. However, I assumed that your requirement was that the header is fixed?
Copy linkTweet thisAlerts:
@sibertauthorMar 11.2021 — > @Sempervivum#1629166 I assumed that your requirement was that the header is fixed?

Both thead and tfoot are fixed as far as I can see. Or am I missing something?
Copy linkTweet thisAlerts:
@SempervivumMar 11.2021 — In your last demo for me they are not, the footer is not visible initially and the header disappears when scrolling down?
Copy linkTweet thisAlerts:
@sibertauthorMar 11.2021 — > @Sempervivum#1629169 In your last demo for me they are not

I use Safari on Mac. Which one do you use?
Copy linkTweet thisAlerts:
@SempervivumMar 11.2021 — I'm using Opera on Windows. I already considered if it might be a browser issue.
Copy linkTweet thisAlerts:
@sibertauthorMar 11.2021 — > @Sempervivum#1629171 I already considered if it might be a browser issue.

Any idea how to fix it?
Copy linkTweet thisAlerts:
@SempervivumMar 11.2021 — Maybe the feature "fixed header and footer" is built in Safari. Datatables features it either but would be kind of overhead.
Copy linkTweet thisAlerts:
@sibertauthorMar 11.2021 — > @Sempervivum#1629173 Datatables features it either but would be kind of overhead

Meaning...?
Copy linkTweet thisAlerts:
@SempervivumMar 11.2021 — Datatables features a lot besides fixed header and footer: Sorting, searching, paging, paging serverside (when the amount of data is large), exporting. To achieve this, including some files is necessary and some people consider this to be overhead.
Copy linkTweet thisAlerts:
@sibertauthorMar 11.2021 — I did something (do not ask me what) and it works on several browsers now. Even on Edge...

http://jsfiddle.net/6s0tjfwL/3/
Copy linkTweet thisAlerts:
@sibertauthorMar 15.2021 — > @Sempervivum#1629176 lot besides fixed header and footer

It works live. Any comments?

http://94.237.92.101:6060/posts
Copy linkTweet thisAlerts:
@VITSUSAMar 16.2021 — It's perfect :)
×

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...