How can I prevent overlapping of table columns?

Question

I want to make my first column in the table static. Here is my jsfiddle:

css code:

.table .headcol { position:absolute; }

Problem is that the first column overlaps with the second column. Any suggestion to prevent the overlapping. Thanks.

Static in what way? Is the rest of the table supposed to scroll horizontally? Please edit your question to clarify what you're trying to achieve. — isherwood, Apr 03 '17 at 18:35
Yes the rest of the table should scroll horizontally when we use it in mobile view. — user3334226, Apr 03 '17 at 19:22

score 0 · Answer 1 · edited May 23 '17 at 12:17

0

In the following post, as you can read from the title, seems that the user had a similar problem

It should cointain something close to the answer your are looking for

edited May 23 '17 at 12:17

Community

answered Apr 03 '17 at 18:37

user2548436

Hi, i've just edited my answer. It's good now, or I have to edit more? Thank you :-) – user2548436 Apr 03 '17 at 19:00

score 0 · Answer 2 · answered Apr 03 '17 at 19:24

0

Just set fixed width to your fisrt column, just like this:

<th class="text-center headcol" width="15%">Date</th>

answered Apr 03 '17 at 19:24

dimmat

2 Answers2