Is there a way to add a scroll bar to a 'td' tag?
I have a dynamic content inside a 'td' tag. I want the 'td' to be of fixed size and if the content becomes larger than the 'td' size, I want a scroll bar to appear only on that particular cell. Is there a way to achieve this?
Yes you can do that.
The easiest way is to put inside your cell a div filling it and set its overflow style property.
CSS :
div.scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
HTML :
<td><div class=scrollable>
Some content with a scrollbar if it's too big for the cell
</div></td>
If you want the scrollbar to be always visible, even when the content isn't cropped, replace auto with scroll in the CSS.
Demonstration
<table width ="400" >
<tr>
<td >
<div style="width:100%; max-height:300px; overflow:auto">Your content here
</div>
</td>
</tr>
</table>
http://jsfiddle.net/7T2S4/1/
Hope this helps
You should need to provide either "height" Or "width" of div element, So that it would be scroll accordingly.
for example you want to apply Scroll Vertically(Y-axis):-
<td><div class="scrollable">
Some content with a scrollbar if it's not fit in your customized container
</div></td>
div.scrollable
{
width:100%;
height: 100px;
margin: 0;
padding: 0;
overflow-y: scroll
}
Related
I have a CSS layout problem. Here's a fiddle
I want a header and footer on the page, with the "content" taking up the rest of the available space. I was doing it with a JQUery plugin that calculated and set the height of the relevant element, but it wasn't playing nicley with some knockout things i had going on on the page so I decided screw that and use CSS.
Setting the sections to be table rows seemed to solve the problem of vertical expansion and the whole thing now nicley fills the page, but i have a table which is causing some issues.
When it has data in it it expands the width of the columns (i don't want the text to wrap). And that means the width of my wrappers also expand (thanks tables) I can't seem to hang a scrollbar on anywhere to prevent it happening.
My question is two fold:
Is there a better way of achieving the header/footer thing?
Can i get my scroll bar back?
The ideal solution would be in CSS rather than using JavaScript. I must support all browsers, including IE down to IE 8, and preferably IE 7.
The HTML:
<body>
<div class="page-wrapper">
<div class="section-wrapper">
<P>I want this at the top</P>
</div>
<div class="content-section section-wrapper">
<P>This is in the middle - taking up all the remaining space.</P>
<P>Making the wrapper a table-row solves the problem nicely...</P>
<div class="table-wrapper">
<table>
<thead>...</thead>
<tbody>
<tr>
But: In this table I have some data which causes the table to overflow the edge of the screen.
</tr>
<tr>
How do I make it have a scroll bar instead?
</tr>
</tbody>
</table>
<p>Ideally the scroll bar would go at the bottom of this section.</p>
</div>
</div>
<div class="section-wrapper">
<P>This goes at the bottom</P>
</div>
</div>
</body>
The CSS:
body, html{
width: 100%;
height: 100%;
}
.page-wrapper{
display: table;
height: 100%;
}
.section-wrapper{
display: table-row;
width: 100%;
background-color: lightGrey;
}
.content-section.section-wrapper{
height: 100%;
background-color: white;
}
table{
white-space: nowrap;
border-spacing: 20px 0;
border-collapse: separate;
}
.table-wrapper{
overflow: auto;
display: inline-block;
}
You could set a max width of the wrapper to the screen with, and make it a block display, then it should show a scroll bar if the table is wider than the available screen. Not sure if that was your question.
.table-wrapper{
max-width: 100vw;
overflow: auto;
display: block;
}
Also, to have the footer at the bottom, you could use flexbox on the page-wrapper.
.page-wrapper {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.section-wrapper {
flex-grow: 1;
}
Updated fiddle: https://jsfiddle.net/211sgmjv/
Given a <table> with one or many <td>'s with text that is wider than the parent <div>, is there a way to make the table scroll without making the parent <div> use overflow:auto, and still have the table retain 100% width?
I'm hoping for a CSS solution I can apply to ONLY the <table> element (or its children).
Example: See JSFiddle Demo.
CSS:
<style>
#wrapper {
width: 250px;
/* looking for solution that doesn't use overflow auto here */
}
table {
border-collapse: collapse;
}
td {
border:1px solid #ccc;
padding: 3px;
}
</style>
HTML:
<div id="wrapper">
<p>Table should scroll, but not this text.</p>
<table>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>..</td>
<td>..</td>
<td>....................................................................................</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
</tbody>
</table>
</div>
Not modifying the parent div is important in my project because <table>'s are in a <div> with a bunch of other content that I do not want to scroll with it. While I could add a wrapper <div> to all tables in my project, I would also have to rewrite a JavaScript plugin (has to do with paging), which I am trying to avoid.
You can use overflow: scroll on the table itself if you make it display as block:
table {
display: block;
overflow: scroll;
}
Edit:
As the comments below suggest, use td { width: 1%; } as a somewhat-messy way to get the table to still be 100% width if the content is narrower than the wrapper.
Fiddle: http://jsfiddle.net/94g53edb/12/
I am just a newbie in css and html, but if I can give my opinion, so there will be two ways in achieving that:
You can set the <p> to the fixed position,
or
You can create another wrapper for the table.
:)
[I'm adding a second answer because the comments on my first answer are going in a different direction than my new answer, and I don't want to derail that train]
Set the table to display: block and overflow: scroll, and give each of the cells a min-width (in pixels) to make up 100% of the container's width.
Here's what it looks like with table content less than the container width: http://jsfiddle.net/94g53edb/8/
Because the cells have only a min-width and not a fixed width, they can expand as needed, pushing the table to greater than the width of the container, and the table will scroll: http://jsfiddle.net/94g53edb/9/
I have the following peculiar problem. Lets start with a code snippet:
...
<td>
<div class="scrollable">...</div>
...other cell content...
</td>
...
Now I want the table render as if the div.scrollable wouldn't take any horizontal space (i.e. the div.scrollable doesn't push on the right side of the table), but show the horizontal scrollbar (on the div.scrollable, not on the whole cell) if the div.scrollable is wider then the containing cell. Is that possible to do via CSS?
Thanks!
Using your basic example you would likely need a set width on the td and to use overflow and overflow-y. overflow-y is CSS3 only but you didn't specify IE8 and below.
EDIT sorry you also need display:block; on the td
td { display: block; width: 50px; }
.scrollable { overflow: scroll; overflow-y:hidden; }
UPDATE:
See the jsfiddle example, notice the 100% width on the table and the fixed layout.. thats to stop the example from just adding a horizontal scroll to the viewport and carrying on.
http://jsfiddle.net/MMeTe/4/
Credit goes to Pricey as his jsfiddle example answers the question, but to have the answer with the code here, I attach it bellow:
...
<style type="text/css>
.mytable {
table-layout: fixed;
}
.scrollable{
overlow-y: auto;
}
</style>
...
<table class="mytable">
<tr>
<td>
<div class="scrollable">...</div>
other content...
</td>
</tr>
</table>
I have a table which should always occupy a certain percentage of the height of the screen. Most of the rows are of fixed height, but I have one row that should stretch to fill the available space. In the event that the contents of a cell in that row overflows the desired height, I'll like the contents to clip using overflow:hidden.
Unfortunately, tables and rows do not respect the max-height property. (This is in the W3C spec). When there is too much text in the cell, the table gets taller, instead of sticking to the specified percentage.
I can get the table cell to behave if I specify a fixed height in pixels for it, but that defeats the purpose of having it automatically stretch to fill available space.
I've tried using divs, but can't seem to find the magic formula. If I use divs with display:table, :table-row, and :table-cell the divs act just like a table.
Any clues on how I can simulate a max-height property on a table?
<head>
<style>
table {
width: 50%;
height: 50%;
border-spacing: 0;
}
td {
border: 1px solid black;
}
.headfoot {
height: 20px;
}
#content {
overflow: hidden;
}
</style>
</head>
<body>
<table>
<tr class="headfoot"><td>header</td></tr>
<tr>
<td>
<div id="content">
put lots of text here
</div>
</td>
<tr>
<tr class="headfoot"><td>footer</td></tr>
</table>
</body>
Just put the labels in a div inside the TD and put the height and overflow.. like below.
<table>
<tr>
<td><div style="height:40px; overflow:hidden">Sample</div></td>
<td><div style="height:40px; overflow:hidden">Text</div></td>
<td><div style="height:40px; overflow:hidden">Here</div></td>
</tr>
</table>
We finally found an answer of sorts. First, the problem: the table always sizes itself around the content, rather than forcing the content to fit in the table. That limits your options.
We did it by setting the content div to display:none, letting the table size itself, and then in javascript setting the height and width of the content div to the inner height and width of the enclosing td tag. Show the content div. Repeat the process when the window is resized.
Possibly not cross browser but I managed get this: http://jsfiddle.net/QexkH/
basically it requires a fixed height header and footer. and it absolute positions the table.
table {
width: 50%;
height: 50%;
border-spacing: 0;
position:absolute;
}
td {
border: 1px solid black;
}
#content {
position:absolute;
width:100%;
left:0px;
top:20px;
bottom:20px;
overflow: hidden;
}
What I found !!!, In tables CSS td{height:60px;} works same as CSS td{min-height:60px;}
I know that situation when cells height looks bad . This javascript solution don't need overflow hidden.
For Limiting max-height of all cells or rows in table with Javascript:
This script is good for horizontal overflow tables.
This script increase the table width 300px each time (maximum 4000px) until rows shrinks to max-height(160px) , and you can also edit numbers as your need.
var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
while (row.offsetHeight > 160 && j < 4000) {
j += 300;
table.style.width = j + 'px';
}
}
Source: HTML Table Solution Max Height Limit For Rows Or Cells By Increasing Table Width, Javascript
I've solved just using this plugin: http://dotdotdot.frebsite.nl/
it automatically sets a max height to the target and adds three dots
I had the same problem with a table layout I was creating. I used Joseph Marikle's solution but made it work for FireFox as well, and added a table-row style for good measure. Pure CSS solution since using Javascript for this seems completely unnecessary and overkill.
html
<div class='wrapper'>
<div class='table'>
<div class='table-row'>
<div class='table-cell'>
content here
</div>
<div class='table-cell'>
<div class='cell-wrap'>
lots of content here
</div>
</div>
<div class='table-cell'>
content here
</div>
<div class='table-cell'>
content here
</div>
</div>
</div>
</div>
css
.wrapper {height: 200px;}
.table {position: relative; overflow: hidden; display: table; width: 100%; height: 50%;}
.table-row {display: table-row; height: 100%;}
.table-cell {position: relative; overflow: hidden; display: table-cell;}
.cell-wrap {position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%;}
You need a wrapper around the table if you want the table to respect a percentage height, otherwise you can just set a pixel height on the table element.
Another way around it that may/may not suit but surely the simplest:
td {
display: table-caption;
}
I need to place a scrollable div in a table cell. The table should be 100% height. The div has a lot of content that doesn't fit in the screen so scrolling should appear. But I want only the div to be scrollable, not the whole page.
If I don't use table, everything is perfect:
<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px; border-style: solid;">
<div>
Item 1<br/>
Item 2<br/>
...
Item 300<br/>
</div>
</div>
Div is scrollable, page has no scrollbar. But if it's wrapped in a table:
<table style="height: 100%">
<tr>
<td>
<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;
border-style: solid;">
<div>
Item 1<br/>
Item 2<br/>
...
Item 300<br/>
</div>
</div>
</td>
</tr>
</table>
page becomes scrollable, and the div ceases to be such. What can I do?
Shouldn't be height: 100%; and overflow: auto; on <td> ?
I think your main problem is that you cannot expect the div to go to 100% height, because the table that is holding it also has a % as its width.
The container of the div must have an absolute height.
This is my code:
<table height="2000px">
<tr>
<td>
<div style="height: 100%; width: 100px; padding: 5px; overflow: scroll; border: 1px solid #000;">
Item 1<br/>
Item 2<br/>
...<br/>
Item 300<br/>
</div>
</td>
</tr>
</table>
Which uses a scroll bar on the div and because of its height also makes the page scroll bar appear.
Unforunately unless you use some hacky CSS work around (Which might won't work in all browsers) you cannot tell a div to be 100% height without giving its container an absolute height as I have done above.
If I am wrong I'm sure someone will correct me, but I have tried to give divs 100% height to fit the browser window in the past without CSS or Javascript hacks and failed.
Tables actually use minimum height, so whenever your div gets bigger than what you want, the table column is actually just resizing to fit your div, and so your div percentage is rendered useless.
You need to use divs, not tables.
You should change table-layout css property to "fixed" value.
<table style="table-layout: fixed; width: 100%;">
<tr>
<td>
<div style="overflow: scroll;">
Scrollable div
</div>
</td>
</tr>
</table>