I would like to create a table with a scrollable body. I'll have my header row, then the data that will scroll while the header is fixed. This is kind of like freezing panes in excel. I tried creating a table above the content I want to scroll, but the column widths don't match up. It looks to me that everything has to be in one table for all the columns to match up. What's the best way to do this?
I set up a fiddle to show what I'm trying to do. I tried a whole bunch of things to make this work, but never got it to come out right.
http://www.jsfiddle.net/polyhedron/pzbmS/2/
Everything seems to look fine to me - assuming that I understand you correctly.
Edit : Sorry - I am sure you looking for an alternatives. These might help
Pure CSS Scrollable Tables
Another similar link...
Here's a quick and dirty jsFiddle I made - it only uses 1 row as you mentioned.
jsFiddle
I had a project where I needed the same behavior. Here is what I came up with:
http://blog.bobcravens.com/2010/01/html-scrolling-table-with-fixed-headers-jquery-plugin/
Here is a demo page of the end result:
http://bobcravens.com/demos/FixedHeaderTable/index.html
Hope this gets you started. Let me know if you have questions.
Bob
Add a text-align: left to thead tr element:
thead tr
{
text-align: left;
}
Related
I have a website with a table and for some reason that I cannot find for the love of god, the last item of the table row is wider than previous items. Here is a link to see what I mean. However, it only does that on some pages. Most pages are completely fine. Here is an example of what its supposed to look like this.
The code is the same on every page and I do not quite understand why it does that because the 'inspect element' gives me that the width of the table element is the same. However, it clearly is not. Please check it out and let me know where to start looking.
The below content in one of the bottom rows is causing the issue -
СК-201(М),231(М),251(М),351(М),501(М)
Its in the 5th row from bottom.
Add space after comma to solve the issue.
some time data come from data store and you cant hanld this with adding space in the table when long words comes in then td width should extend its simple to solve this issue in css add this line for you td css
word-break: break-all;
your css will be look like
.catalog_items_blocks td {
padding: 10px 0 38px 41px;
width: 179px;
word-break: break-all;
}
now words breaks when cross the td width
thanks
Have a table set up, with a table nested in most of the cells, basically a pyramid matrix type structure. Issue i'm having is the cell borders don't line up and in some cases double up, so i'm a little confused as how to fix it, having already used border specific values, ie, border-bottom and border-right, etc.
Codehttp://jsfiddle.net/WgRs6/5/
PS: I'm new to this so not sure how to post the CSS and HTML like in other user posts, where they're boxed in and you can scroll through, so just attached the
The problem was that you had a padding set..
So, remove the padding for the <td>
Kindly check this fiddle
I,ve added
td{
padding:0;
}
to your css
UPDATE
See the fiddle
I've found out the problem in your code..You used several tables inside a <td> which created such a problem.In my fiddle i've done the whole thing with just one table using rowspan and colspan.Check it..
I'm sorry that i accidentally mis placed your table values while copy pasting and because it took a lot of time i was not able to complete the html.So kindly follow the same procedure inorder to generate the full table..
Just set the td padding to 0px:
td{
padding: 0 !important;
}
http://jsfiddle.net/WgRs6/7/
I have a table with only two columns . i want to make first column is fixed and next column scrollable in all the rows..it should be horizontally scrollable as a whole .. not individual columns
There can be hundreds of rows. .
I have a demo code here in Jsfiddle
I dont have much exposure to css styling.
You could use CSS overflow:auto;, as in http://jsfiddle.net/Yw679/2/
If I understand correctly, you want the entire left column to be static, and the entire right column (including the header) to be horizontally scrollable. Is that correct?
If so, it's not possible with one table. But with a bit of extra code, it's possible with two tables like this: http://jsfiddle.net/Yw679/6/
What you're searching for is called "frozen columns".
See a jqGrid demo here that implements column freezing in version 4.3. It's quite a versatile grid plugin and definitely worth a try(if you haven't already, that is).
You could do something like this:
http://jsfiddle.net/Yw679/3/
th{
display :inline-block;
height: 50px;
width: 100px;
overflow: scroll;
}
th:first-child{
overflow: hidden;
}
I think you want to do something like this example
https://www.datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
It's better to use a single table along with two column fixed and other are scrollable.
Here is the link.
I have a menu that's been giving me quite some trouble. What I'm trying to do is make the menu links, when clicked, reveal a drop down secondary division. However, it's acting as if the menu being revealed is floating and I can't seem to figure out why.
Here's the ideal design I want:
http://jsfiddle.net/WeL6j/7/
Notice how the grey division is affected and slides down as well.
I'd like the same thing to happen with the divs that hold 01, 02, etc and the one with the green 01. Basically all the content below the menu. I've posted a fiddle of my code just to give an idea of what it's doing and so you can edit it in real time. I haven't created any fallback code for it, so it's only really viewable in chrome. (sorry) It's also going to be messy as I've been moving things around trying to get it to work properly. Anyways, here's what I have so far.
-removed-
Thanks in advance for the help, Brian.
Try this:
http://jsfiddle.net/ETaqa/63/
BTW, you should really format the nesting. It was confusing figuring out the div levels.
Hi you can define some properties in you css as like this
.content {
position: relative;
top: -7px;
z-index: 10;
}
I have a two column layout, with a gray sidebar on the right. I need the sidebar's height to expand when the height of the left column is increased (due to content being dynamically expanded). I can make the sidebar fit a static page, but I cannot get it to increase in size with the rest of the page. Did some Googling, but couldn't find a work-around that worked for me.
Does anyone know how to do this?
This is a common problem when using DIVS for this type of layout.
If you google 'Faux column' you should get some answers.
eg. http://www.alistapart.com/articles/fauxcolumns/
This may be slightly off but if you use jQuery on your site you can perform a quick calculation and resize all DIVs sharing a similar class to the maximum height:
$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
I have been haunted by this problem for a while and I wrote an article about this issue: Done with faux columns. Here is what I argued:
JavaScript based solution for this
problem is not worse than any other
solution. In fact if you are using
JavaScript, you may save a few hours
of frustration of trying to get things
working. People will warn you against
this by saying “What will happen if
the user turned off JavaScript?“.
Believe me, if the user has turned off
JavaScript, most of the web is broken
for him anyway. Your sidebar does not
matter to him.
As cballou mentioned, the simplest way to do this thing is to use JQuery code:
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
I changed the background-color to the same color as my sidebar, on that specific page, although I do have backgrounds for all my sections rather than one overall background. But that might not work for everyone.
In my stylesheet,
.sidec
{
background-color:#123456;
}
In my HTML page,
<body class="sidec">
content....
</body>
I recently saw a quite creative solution to this problem using the CSS properties position:absolute and border.
Definitely worth checking out to see if it works for you.
Link: http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
I'm not sure if this will help, as I'm a newbie. However, when struggling with getting my sidebar to show the whole content when I doubled it's size I did the following. I was changing my height and width with no response until I changed the class. My class was listed SB frame SB width. So when I changed my class to read SB height SB width it fit to my content instead of the original frame size. I also tried SB max sb width with worked too, but it took out my footer menu bar (meaning it wouldn't show it anymore). I went back to SB height SB width, and all is well. That's super duper elementary for all of you I'm sure, but just in case there is another newbie reading this that doesn't understand much about html code like myself... I hope this helps =)
Happy Holidays Everyone!
hugs, tara
I'm guessing you want to apply certain effect to your layout such that it will require both columns to resize together. If you want to dynamically change the values of the height of the columns, I doubt it will work simply with css unless you implement some javascript to control the style.
As Dal suggested, do look at the link on faux columns. As the name suggests, the solution isn't much about modifying the columns height. Instead, it gives the "illusion" that both columns appear to be of the same height when in reality they are not -- and is with the use of tiles of background image.
The idea is there isn't a need to complicate the mark-up. Simple structure with a touch of "illusion" with images is a common practice in web design.
Regards,
Jonah
With the poor attitude towards new members on here I expect to be barracked for this answer, here goes.
I got around this problem by creating a background image 960px wide 1px high with the two colors I needed for the columns in their respective widths (780px and 180px). I then used this as the background image for my container repeated on the y axis and made the content and the right sidebar background-color: transparent.
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}
.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}
I am sure that this method has its limitations but it works perfectly on all my pages.
It is possible that I have not explained this very well, if so, be nice about it will you please. I will endevour to expand on my method(which is probably already common knowledge).