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.
Related
I've been trying unsuccessfully to set an HTML "select" field size in Bootstrap 3(latest) to normal (not 100% width). Do you know an elegant way of doing this, without hacks like tables around fields.
I also don't want to put a select field in a bootstrap column since then I'll have indent due to borders.
Custom styles with specific sizes is also not pretty in my opinion, because all I want is for the field to be only as long as the longest content (default behavior of a select)
Perhaps there is a really easy way to circumvent this since Bootstrap decided to make all selects (using form-control class) stretch all the way, looking forward to your illuminating suggestions )
Try setting the width to auto or initial?
width: auto;
or
width:initial;
http://www.w3schools.com/cssref/pr_dim_width.asp
select
{
width: auto;
width: inherit;
}
Want to start off by saying I have tried this method with no success, it could be because I am doing it wrong idk...
So I have a 7 column table and my issue is that my 2nd column (TX4200) does not have a colspan but the width of that column seems to be bigger than I would like and as a result the other columns are suffering. I am thinking because of the type of layout my table has the auto-width algorithm is having some issues, so I want to try and take this on by brute force.
Things I have tried
table-layout: fixed
Setting the table width: 1000px; but even then the TX column still takes up the most space
min-width & max-width didn't do anything
Here is my fiddle http://jsfiddle.net/8Xy24/1/
Any help is much appreciated! Thanks in advance.
You likely want to look at setting either the overflow to hidden or word-wrap to break-word in conjunction with the max-width for the cells in question depending on the kind of behaviour you want.
There you go:
http://jsfiddle.net/8Xy24/2/
I just added a td width:
td {
width:50px;
}
I have a series of tables that are stack on top of one another. They could be a single table, but for functional reasons, they are split up. They look something like this:
Now, the problem is that they aren't lining up as I would expect them to. The code that governs them looks like so (It is quite lengthy):
http://pastebin.com/eWhEPzF5
The structure is 3 tables deep, and you can see it poke outside of the most inner table when it splits tables. Global styles are pretty simple:
body *
{
font-family:'Consolas';
font-size:12pt;
padding:0px;
}
table
{
border: 0px;
border-style:solid;
padding:0px;
border-spacing:0px;
border-collapse:collapse;
}
td
{
padding:0px;
border:0px;
height:25px;
border-style:solid;
}
--
Now, I originally thought the input boxes is what was screwing up the alignment, but after removing them completely, nothing changed. In fact, adding rows one by one, it only 'breaks' when I add the first row of the first table ("Oh my look at all this data").
I doubled checked all the styling and everything and it all is correct.
Why aren't these cells lining up?
use class, <col> tag and colspan to set equals width in each tables.
add table-layout:fixed; to avoid width to be resized by content.
Now, if you make a codepen from your pastbin it would be confortable to re-use your code and see what you are up to , to devellop further.
regards
Try using this on all the tables:
table-layout:fixed;
Table layout property in w3schools
Regards,
Nikola
There are various places you have the typo
cellWdith310
Assuming you've left out some CSS then that could be the issue
UPDATE:
Here's a JS fiddle. There were just various problems with your HTML such as not having enough TDs in the last table etc. Diff the source see what's different
http://jsfiddle.net/AhLAD/7/
Hi all and thanks in advance for your help.
I'm pretty new to the CSS, and I would like to have a good input to start building and learning the fastest way possible. I'm already doing some CSS tests myself. Right on the question.
this is the relative css code (I put it on pastebin because it's a bit long)
CSS CODE
As you can see in the code, the 2 tables showing up in the image, have a background and I had to set their size manually with
width:100px;
height:120px;
in the td.menuleft and td.menucenter classes.
1° Question
How do I make automatically resizing cells?
For example i want to say:
Make table tag wide 100% of the page width, then let me make classes for cell tables that are a certain percentage of the table width.
Example
Pic of my work, and how I want to make it like
This way it will be easy to make up tables into tags to automatically fill pages. I've seen something about positioning (relative, absolute) but I didn't managed to make it work.
2° question
What's the best way to structure a web page with css in general? It's ok to do like I said, a div, with tables inside and place every element in a table like manner?
Or can you give me any guide step to step on how to do a particular template?
Thanks guys.
when you want to learn how to make good and effective design that are also considered any worth by search engines, then don't use tables for layouts. tables are there for showing table data, not layout. Use instead divs and start reading about positions, displays, floats.
That is the way you want to go
If you set the tds to be a certain percentage width, they will be the percentage of the parent. so:
table {
width: 100px;
}
tr {
width: 100% /* Will be 100px */
}
td.quarter {
width: 25%; /* Will be 25px */
}
td.half {
width: 50%; /* Will be 50px */
}
And I agree with the previous poster, do NOT use tables for layouts. Not that you are doing that here. But for layouts stick to divs and such.
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;
}