i need to create a table with the first column fixed and the rest of the columns scrollable horizontally.
I managed to implement this successfully BUT when i implement it in my website it doesn't seem to be working.
when i make the table head fixed, the first column breaks the layout
when i use this with a plain table it works but not with my theme
.table-wrapper th:first-child {
position: fixed;
left: 5px
}
Table which works without the css : http://www.vidznet.com/table/2.html
Table with css : http://www.vidznet.com/table/1.htm
can someone tell me what might be conflicting?
Update:
what i need is the first column to be fixed and the scrollbar to start from the second column like this
It should be like this: http://vidznet.com/table/table1.jpg
but in my css theme it looks like this http://vidznet.com/table/table2.jpg
The problem is with your CSS property:
.table.table-striped > thead:first-child > tr > th:first-child {
width: 25%;
text-align: left;
}
The width is too large for the column. It needs to be changed to 5 to 12%, depending on how you want how far you want the underline to go, to fit in with the other fixed elements.
Related
how can I do html table left column and header fixed ?
I received this reference
http://jsfiddle.net/DJqPf/7/
I just want content scrolling
thank you
https://jsfiddle.net/Anatolium/DJqPf/1239/
I tried this but it did not
.header th {
position: fixed;
left: 5px
}
https://jsfiddle.net/Anatolium/DJqPf/1243/
and I want to make a single table
I saw this example but I can not use... because my project only for single dynamic table
http://jsfiddle.net/GnN66/2/
thank you
I did what you want exactly see the below css code & more info click the following js fiddle link
.header{float:left;width:100%;background:#fff;height:60px;}
.header tr{position:fixed;background:#fff;}
jsfiddle
After a couple of days spent struggling with HTML tables, my forehead has a grid of indents which incidentally are a mirror copy of my keyboard.
Speaking of grids, I'd like to know if there's any set of rules regarding <td> size.
Is it all according to the content? Is it affected by other cells in the same row? By the row itself? By the table? Plain ol' CSS?
NOTE: I'm specifically not looking for an answer to a specific question.
I just want to know how the darned height is calculated so I can figure out myself each time what to expect.
Yes table cells follows the content and it's siblings height.
You can say that it's a rectangle split in section, that no matter what it's inside it will always stay as a rectangle.
So even if you add a css height it will ignore it if the text is bigger than the css height.
So pretty much you can expect a dynamic height in most case scenarios.
But still...it should be used to show only tabular data and nothing else. For the rest there is display:table-cell;...
Here is a FIDDLE that you can play with.
Row styling doesn't work in this setting.
first td row: standard
second td row: given a height - note it affects the entire row
third td row: given padding, again affects entire row
fourth td row: given a large font
fifth td row: given large font and padding
CSS
table td {
border: 1px solid black;
}
table tr:nth-child(2) td {
height: 50px;
}
table tr:nth-child(3) td:first-child {
padding: 10px;
}
table tr:nth-child(4) td:first-child{
font-size: 34px;
}
table tr:nth-child(5) td:first-child{
font-size: 34px;
padding: 10px;
}
PS - Use tables only for "TABULAR" data.
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 strange problem that I'm actually ashamed to admit. See the whole thing here:
http://jsfiddle.net/Sorcy/ng2by/1/
My problem is: the second (very small) table should actually stretch the whole width of the container. When I look at it with firebug it does (therefore the blue box to the right, which is actually the background color of the table), but the rows themselves only stretch as far as they have to to accommodate the content.
Since I don't want a big blue box beside my tables, how do I get this thing to stretch the whole width? No amount of setting width for tablerows has brought me anything, and since I can not know beforehand how many columns my table is gonna have, setting a width for the cells is also out of the question.
Only solution I have so far is writing a small Javascript that goes through the tables, counts the columns and sets the width of each on the fly, but of course I'd like a pure CSS solution much better.
Edit:
As requested, an image of how it is supposed to look:
Direct link for bigger image
I believe the main problem is this:
table {
display: block;
}
If you change the display property for tables, you are basically asking the browser to ignore it's a table and handle it as a regular element, thus leading to unpredictable quirks.
I don't know what you were trying to accomplish but it's possible that you really wanted this:
table {
border-collapse: collapse;
}
This attribute makes it easier to accomplish certain visual designs.
Update #1: A dark line after the last row of the table can be done with this simple style:
table {
/*background-color: #001F66;*/
border-bottom: 1px solid #001F66;
}
Update #2: To get a dark line after the cells of the last row replace this:
table tr:last-child td { border-bottom: none; }
... with this:
table tr:last-child td { border-bottom: 1px solid #001F66; }
i'm new to html and i'm having problems moving the table down the page. http://tinypic.com/view.php?pic=eqdpjb&s=7 . I tried setting the 'margin-top: 400;' which works however the navigation bar at the top (i created in dreamweaver using the navigation 'wizard') moves as well to the bottom of the page!. How can i fix this? i want to move only the table without affecting the navigation bar been driving me nuts!
css
table{
background: whitesmoke;
border-collapse: collapse;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
Your problem is that your navigation is positioned relatively to your table so when you add a margin also the navigation gets the margin.
The solution would be to add a minus margin to your navigation, as shown here:
#navigationId {
margin-top: -400px;
}
If you are adding margin-top: 400px; to table and it also moves the navigation, then that either means the navigation is also a table or the navigation is within the table.
If the navigation is also a table you will have to give the bottom table a unique id and then add the margin to that id only.
If the navigation is within the table, put it in its own div.
If it's none of the above you will have to post some HTML.
Try this:
table {
background: whitesmoke;
border-collapse: collapse;
margin-right: auto;
vertical-align: bottom;
margin-left: auto;
}
Hope it works for you! :)
Longer term, I advise you to learn to hand code using an ide such as netbeans or a simple editor such as notepad++. Using dreamweaver is all very well but unless you understand how the code works you will always encounter similar frustrations. A great resource to learn html and css is w3schools www.w3schools.com
A very good book on css is css the missing manual (o'reilly)
You may find all this slower in the beginning but you will end up writing cleaner and faster code as a result.
Make sure the table and the navigation bar are in two separate tags, which are both in a third div.
By using margin-top on the div with the table, you will force that entire div down from the top of that third container div.
Make sure to get rid of the margin-top stuff in the table css declaration.
Eg.
Navigation code here.
Table here