0

So I'm trying to create a React component library that has the features as its jQuery plugin counterpart , I'm almost done with the creation of the library but the scrolling feature is one that I strangely cannot implement correctly, here's what it should look like this: The table I to create in React

I used two different methods in order to achieve this particular effect

  1. I applied the following CSS properties to the <tbody> :
.DataTable__body {
    display: block;
    height: 250px; /* If the dev. chose a height of 250 pixels */
    width: 100%;
    overflow-y: scroll;
}

The <tbody> has now scrolling but my <table> has a lot of columns, it will only take up the width of the content in the first row like this: My table component with the CSS properties afore mentioned

  1. I set the same CSS properties to the <table>:
.DataTable {
/* Properties to make the scrolling effect */
   display: block;
   overflow-y: scroll;
   width: 100%;

/* Table properties */
   height: 50px;
   border-collapse: collapse;
   border-spacing: 0;
   table-layout: fixed;

}

But it doesn't work and actually kinda broke the table: Table after changing the CSS properties

If anyone could help me solve this issue, I would greatly appreciate it.

Also, here's the CodePen reproducing the first effect:

https://codepen.io/phenix47/pen/zYJxxQj

Le Phenix 47
  • 127
  • 9
  • 1
    I recommend recreating this on codepen.io or similar to get better help from the community. – Jesse Kochis Feb 15 '23 at 13:10
  • 1
    You're right, so here's the CodePen: https://codepen.io/phenix47/pen/zYJxxQj I will later on add it into my post – Le Phenix 47 Feb 15 '23 at 13:15
  • Does this answer your question? https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody?rq=1 – Wesley LeMahieu Feb 15 '23 at 13:24
  • Also you can work with `width: 100vw` instead of `100%` which is `Relative to 1% of the width of the viewport` – Wesley LeMahieu Feb 15 '23 at 13:25
  • One thing I noticed immediately is that the `th`s will not scroll in sync with the `tbody` columns by only applying the scroll to the `tbody`. The other thing I noticed is that applying `display: block` to the `tbody` is causing the element to flow differently than a table element would. I think there are a few fundamental issues with the approach to the markup and CSS that need to be addressed first. I apologize that this isn't the answer you were hoping for, but it's difficult to troubleshoot when I see those other problems present. – Jesse Kochis Feb 15 '23 at 13:29
  • Thank you for taking the time to look at my code and offer your insights! I'm still learning and appreciate any feedback you can provide. Though I'm not entirely sure I understand what you mean by the 's not scrolling in sync with the tbody columns, could you elaborate on that a bit more? Additionally, you mentioned issues with the approach to the markup and CSS that need to be addressed first, could you please give me some more specific guidance on what those issues might be? Again, thank you for your help and I look forward to hearing back from you. – Le Phenix 47 Feb 15 '23 at 13:42

0 Answers0