So what is happening is that my table has expanded over my body, even though it is contained within it, I think screenshots is the best way to show this of when I have over the elements when I'm inspecting them (Chrome):
Body
tableData (wrapper for table)
Table
This is my code:
<body>
<main>
<div class="tableData">
<table>
"..."
</table>
</div>
</main>
</body>
I need my body to completely contain the table for styling purposes. How would be the best way to go about this? Is there a CSS overflow property I need to set?
The browser probably decides it cannot possibly fit your table within its container and instead lets it overflow. If that is the case, you could set overflow-x: auto on .tableData to add horizontal scrollbars to the wrapper, technically making the table fit inside the body.
You can of course always investigate why the table is so wide. It may be because of cell padding, white-space: nowrap somewhere or other things that forces it to be unnecessarily wide.
Another possible cause, which would explain why scrollbars won't appear on the wrapper, would be if the table has position: absolute (or fixed), taking it out of the normal layout flow.
Related
i have a table that looks like this:
<table id="navbar" border="1" style="background-color:navy;height:150px;position:sticky;top:0px;right:0px;left:0px;border-style: solid;border-color:black;max-width:999999px; width:100%; background-image: none;">
the style for all tables:
table{
text-align:center;
width:30%;
left:25%;
/*font-size:larger;*/
}
the psoition sticky should make it so that the table will always remain at the top of the screen, even on horizontall scroll. yet it doesn't work. the only way i found for it to work was by adding another table above and giving both the display:inline-table attribute, but it is not the solution i am looking for.
anyone knows the reason for why it doesn't work?
edit-i need to use position:sticky. it works pefectly for vertical scroll, but not for horizontal scroll. that is the problem i need to fix
Sorry it took so long for someone to answer you #Erel.
So you don't have to read my ramblings if you just want code, I'll start with the demo: https://codepen.io/NerdyDeeds/pen/oNYVLpB
There's a couple things to note here, for the behavior you're after:
Much like the whole height:100% thing, for this to work, the measurements need to go all the way down to the :root. That is to say, every DOM node hierarchy needs to know the actual limits of its bounding box (don't worry: it'll become more clear below).
When an object is positioned sticky, it basically has TWO sets of coordinate limitations: those of the viewport, AND those of its parent. If the parent is 500px wide and you scroll 1500px off screen to the right, the sticky element will stop at the edge of its parent, not continue to tag along. Which brings us nicely to the most important aspect:
The <body> tag is simply another block-level container object, only it gets an implicit min-width:100vw; min-height:100vh. That said, if the one of IT'S children that's necessitating the horizontal scroll is, say, 250vw wide, it will expand to contain that element, but it's measurement width remains the same; it's children still think papa's only 100vw wide. Likewise, were you to explicitly tell it that it's "ACTUAL" width is really only 100vw, it too, will slide off-screen when scrolling, carrying its sticky child (aren't they all?) with it.
The same thing applies to all the ancestral containers of your sticky element. They DON'T automatically get the min-width, so you need to explain to them they're to take up that full space. If you want that done dynamically, you need to explain that to the <body>, so they can inherit the "real" 100% of the page. If any ancester is throttled in its movement or its dimensions, that will cascade all the way down-chain to your element, sticky or not.
The simplest way to tackle this I've found is to simply add:
body {
width: max-content;
}
...to you CSS. This tells the body "you're actually as wide as your widest contents... pass it on!" The "cascading" portion of the CSS will take hold and carry they measurement all the way up to your sticky element, provided none of the parent nodes between it and the body themselves are constrained (like if you set a width:100vw in there somewhere. 100% will work fine, but again: only if none of IT'S ancestors is smaller).
Check out the attached CodePen. I tried to make it as self-explanatory as I could.
And again: sorry nobody got back to you sooner. That's a frustrating feeling that stinks. I hope you already found your solution, but if not, this may help who comes googling after. Hope this helped.
Use fixed position:
<table id="navbar" border="1" style="background-color:navy;height:150px;position:fixed;top:0px;right:0px;left:0px;border-style: solid;border-color:black;max-width:999999px; width:100%; background-image: none;">
position: fixed always fixates an element to some position within its scrolling container or the viewport. No matter how you scroll its container, it will remain in the exact same position and not affect the flow of other elements within the container.
position: sticky basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed, causing the element to "stick" to its position instead of being scrolled out of view.
The code that is being rendered
Shows the table rendered, as you can see, once I scroll past the max width the data wont show
<div>
<table (not gonna show all the markup for this. this table holds the headers of each column. this appears when i scroll to the right past the max width)>
</div>
<div styel="height: inherit; overflow-x:hidden; overflow-y: auto;">
<table (not gonna show all the markup. this holds the rows of data, that dont appear past the max width)>
</div>
When the code from image 1 gets rendered, the data that exists past the max width does not appear when I scroll to the right.
The table headers, however, do. Upon investigating I found the problem to be a div tag.
The way it's marked up when I inspect the page (HTML snippet above), the header of the table is wrapped in a div tag, and the body of the table is wrapped in another div tag.
The div tag around the body has styles overflow-:x hidden and overflow-y: auto (the div tag around the header has no style).
If I unset both of the overflows, the table looks exactly how I want it to look.
However, I did not code these div tags and I am not sure how they got there, I'm guessing material UI put them there. How do I change or get rid of these tags? Or is there a work around?
You can pass the style/theme by withStyles(styles)(YourTable) like this example.
Or, you can add a className to your TableBody and update your CSS accordingly.
I have a table with two columns. I want the first column to be scrollable, so that my table can stay at a fixed height and not expand continuously. I only want it to be scrollable vertically though: Horizontally the overflowing parts should still be visible (In my case, the overflowing parts are on-hover tooltips which are getting hidden and add a horizontal scrollbar...), without having to scroll horizontally. My CSS/HTML looks like this:
<table class"tab1">
<td class="td1"><div class="container"><!-- Many, many, many floating elements here --></div></td>
<td></td>
</table>
CSS:
.tab1 {
table-layout: fixed;
width: 100% /*100% of the parent node*/
height: 20em;
}
.td1.container {
overflow-y: scroll;
}
2 Problems:
The height of 20em gets ignored. Even though the first column now gets a scrollbar, it still expands to its own needs.
When hovering over one of my elements, which generates a div with position:absolute, a horizontal scrollbar appears and the part of the tooltip that overflows gets hidden.
How can I fix this?
PS: The code is simplified of course, but I hope that it still illustrates my problem well.
PPS: Here is a JSFiddle: jsfiddle.net/pg0cLpjd
This question is even more difficult than I thought...
But here is a partial solution:
table-layout: fixed; only applies to the table itself and its columns; not the height. A table will always grow with its content. But there are a couple workarounds:
Set your table to display: block;, give it a specified height and set its overflow-y: scroll; (This also might solve your second problem, depending on your needs)
Place a div with a specified height around your table and set overflow-y: scroll;. The table still grows inside the div but you have a scrollbar.
Place a div in your columns with a specified height and set overflow-y: scroll;. This differs from the first attempt only in the position of the scrollbars and you can scroll every cell independently. But this has one huge disadvantage, which I am going to explain now:
As this answer says: If you set one overflow direction to something else than visible, the other overflow direction will automatically set to auto. (it's a feature, not a bug). And this is exactly where the second problem lies. Your code has the right logic, but it's just not possible. There are solutions using a wrapper div, (it didn't work for me) but you could give it a try.
I'd recommend having a look on how to make tooltips with JavaScript. There are plenty tutorials out there on the internet.
I'm working on a page where I need a table which will horizontally-scroll inside of a parent div if the table becomes wider than its parent.
Unfortunately, the platform I'm building this on places my code within a parent table cell, which breaks this. It seems that even if I put my table inside of a div (and set overflow-x: scroll on that div), the parent table cell inserted by the platform will expand past the size of the page to contain the children.
I've made a fiddle of what this looks like here:
http://jsfiddle.net/d3e9esL5/
... and a fiddle of what I want this to look like here (sans outer table):
http://jsfiddle.net/4budchj6/
Clearly removing the outer table fixes this problem, but unfortunately due to the platform I'm working on I can't do that. It's also best if I can avoid applying styles to the outer table, as that markup isn't under my control.
Is there any way I can style this the way I want without changing the outer table's markup or style?
When you use overflow-x you have to specify max-width (or width) too.
If you write something like this:
.flex-table {
overflow-x: auto;
max-width: 250px;
}
You will have a table never bigger than 250px, with horizontal scrollbar showed only if needed.
As pictured in this Fiddle, I have a three tables on a page. I want to be able to scroll the body of "Leaderboard" and "Queue," leaving the caption and table header alone. Preferably without absolute positioning.
Somewhat related, I also need the table (not including the caption to have a little bit of padding on the sides (but not between individual cells).
Add overflow: scroll; to your divs and include a height. If you only want to scroll in one direction, instead you could do overflow-x for horizontal scrolling and overflow-y for vertical scrolling. For detecting if the div even needs to be scrollable, use overflow: auto;.
Add overflow: auto; to the surrounding DIVs you want to scroll. You may want to set explicit heights, depending on your layout — you don't have to but it won't scroll if you don't. You could try setting a max-height if you want it to stretch only to a point. If you only want it to scroll vertically, some browsers support overflow-y: auto, but not all.
Since the <caption> is in the table, you can't set the padding or margin on the table. You can either:
Take the caption out of the table and make it a simple header like h2, then adding a margin to the table, or
You can set padding-left on the left table cells/column and padding-right on the other side. Not real clean, but lets you keep the <caption> semantic if you want.