I have huge amounts of data populating an HTML <table> having more than 200 rows and 200 columns.
However, when I scroll the page horizontally or vertically to view the data, the header columns (like th for instance) go beyond the page.
How can I scroll through the table and still keep the top row and leftmost column fixed so that I will always know what data I'm seeing.
Here is a good solution: http://www.imaputz.com/cssStuff/bigFourVersion.html
Although implementing a JavaScript/jQuery solutions opens a lot more doors.
See this SO post for more info: HTML table with fixed headers?
You can use jQuery or you can try to mix the solution below:
header: http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html
header and first column too but still in beta:
http://fixedheadertable.mmalek.com
Just the first column fixed:
http://www.java2s.com/Code/HTMLCSS/Table-Style/Fixedtablefirstcolumn.htm
Use simple solutions when they exist. :)
You can use a tbody and give it either fixed height or max-height and overflow: auto;:
CSS:
tbody {
max-height: 500px;
max-width: 100%;
overflow: auto;
}
And HTML like so:
<table>
<thead>
<tr><th>headers</th></tr>
</thead>
<tbody>
<tr><td>body</td></tr>
</tbody>
<tfoot>
<tr><td>footers</td></tr>
</tfoot>
</table>
Related
I am trying to fix the width of the first column in the primeNG table but somehow it is overriding my CSS even though it is showing while inspecting the element.
Basically, I am looking for CSS in which by changing the tab the first column of the table will have a fixed width no matter what is the size of all columns.
I have tried following way by defining fixed width for the first child but it is taking based width:100%.
In the above image, you can see the size is coming as 368 even though it is 100px defined.
Same when I change the tab, the width is coming as 920 even 100px is fixed.
Is there any way I can define fixed-width 100px with having table width:100% as I don't want to break responsiveness?
Below is reproducible example for reference:
https://stackblitz.com/edit/primeng-tablescroll-demo-wtpbny
In primeng 12 they removed colgroup template so if you are using colgroup over the application need to remove because custom width is not working for column if you are using scrollable check migration guide.
link:https://github.com/primefaces/primeng/wiki/Migration-Guide
solution:
you need to add same width for both tags <th [style]="'width':'100px'"> and <td [style]="'width':'100px'">
if you are using dynamic columns then add one more property width like below
[{ header: "Name", field: "name", width: '100px' }] // column object array object
<p-table [value]="data" [columns]="ColumnObjectArray">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns; let idx=index;" class=""
[style]="'width':col.width">{{col.header}}</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-data let-columns="columns">
<tr>
<td *ngFor="let col of columns" [style]="'width':col.width">
{{data[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
try this one you will definitely get the responsive width to table and also you will get the custom column and header width
I've the solution required in one of my projects.
You should perform these steps:
Set a width for your desired columns
Set the horizontal scroll as per primeng documentation, in Horizontal Scroll section:
Horizontal Scroll:
In horizontal scrolling, it is required to give fixed widths to columns. In general when customizing the column widths of scrollable tables, use colgroup as below to avoid misalignment issues as it will apply both the header, body and footer sections which are different separate elements internally.
Here is a live example including a fixed size only for first column and a responsive table.
This is the only solution (setting a fixed size for your table) because if you set the width to 100% in a mobile device, probably not all columns will be displayed or will be overlapped, breaking responsiveness.
I think the problem is just that your selector for the th element is slightly incorrect. You have:
::ng-deep .p-datatable .p-datatable-tbody > tr > th:nth-child(1) {
but you just need to use .p-datatable-thead instead of .p-datatable-tbody:
::ng-deep .p-datatable .p-datatable-thead > tr > th:nth-child(1) {
This should fix. Removing fixed with for all th elements.
Add this to your style.css
.p-datatable .p-datatable-thead > tr > th {
width: inherit !important;
}
I have an html table that is created using constant contact and and I would like to make it responsive and fit the container div holding it.
Here is the demo
I tried the following but this doesn't work as well
<table border="0" width="100%" cellspacing="0" cellpadding="0">
Table aren't great at being responsive and keeping their layout - so it's probably best to override their styles on smaller screens, like:
http://jsfiddle.net/wildandjam/E32Cq/
#media all and (max-width:768px){
table,tr, td, tbody, td p table div, table table{
width:100%!important;
float:left;
clear:both;
display:block;
text-align:center;
}
table img {
max-width:100%;
height:auto;
}
}
Pure css way to make a table fully responsive, no JavaScript is needed. Check demo here Responsive Tables
Here is css
<style>
.tablewrapper{width: 95%; overflow-y: hidden; overflow-x: auto;
background-color:green; height: auto; padding: 5px;}
</style>
And here is HTML Part
<div class="tablewrapper">
<table class="responsive" width="98%" cellpadding="4" cellspacing="1" border="1">
<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Address</td>
<td>Contact</td>
<td>Mobile</td>
<td>Office</td>
<td>Home</td>
<td>Residency</td>
<td>Height</td>
<td>Weight</td>
<td>Color</td>
<td>Desease</td>
<td>Extra</td>
<td>DOB</td>
<td>Nick Name</td>
</tr>
</table>
</div>
Additionally use can use jquery to add tablerapper on page load, if you don't want to manually add tableWrapper div around your table. Just use
$().ready(function(e){
$(document).find("table.responsive").each(function(e){
$(this).wrap("<div class="tablewrapper"></div>")
})
})
It'll be much easier if you don't use html elements that aren't designed to do this job. Tables are used for presenting data, not to hold layout.
If you really need to use tables you'll have to hide and show rows with media queries, which is a pretty bad practice.
If you decide to go with divs, you can float them setting different width in media queries depends on screen size.
I've been looking to your case and I have two answers for you.
The first one is the answer to the question "¿how to make your html table responsive?" (note: Spanish article, you may need chrome page translator for example)
The second one is "you should considere a more semantic markup" (tableless) for that content. Instead of using <table> you should use <ul><li> as follows:
<ul class="itemList">
<li class="item">
<img src="" alt="" />
<p>From</p>
<p class="price">25€<span>per person sharing</span></p>
</li>
</ul>
Then use external CSS to apply style:
.itemList {width: 100%} /*probably not necessary*/
.item {display:inline-block; width: 33%; max-width: /*here your desired max width*/}
.price span {display: inline-block} /*no cells, no floats = no problems*/
Finally you can use #media queries to creat your CSS breakpoints:
#media only screen and (max-width: 480px) {
.item {display:inline-block; width: auto; max-width:100%;}/*just as an example*/
}
Just let me know if you have any further questions
I try to make a lite rwd table extend without any other dependency libraries (ex: jQuery):
https://github.com/sean1093/html-rwd-table
You can simply use as follow:
<div id="myTable"></div>
var myTable = new rwdTableExtend("myTable");
myTable.initTable();
You can use bootstrap to make table responsive.
Define class as table-responsive to make table as responsive.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
TL;DR:
I have a solution that works well for a lot of table implementations, given that you are formatting your tables well (table>thead>tr>th^^tbody>tr>td). Find my CodePen here. Depending on the data in your table, this may be a good mobilizing solution.
The Director's Cut
See my CodePen here.
This solution assumes you have built your tables nicely, meaning you are using thead with th and tbody with td. For example:
<table>
<thead>
<tr>
<th>A</th>
<th>S</th>
<th>L</th>
</tr>
</thead>
<tbody>
<tr>
<td>33</td>
<td>M</td>
<td>United States</td>
</tr>
</tbody>
</table>
Given that the table data isn't characterized by columns and columns of numeric values, this JS / CSS solution works well. You can see it in action on my employer's docs pages (SmartyStreets Documentation) and in human readable form on the CodePen snippet I built for it here. To see it working, resize the screen. Breakpoints are set differently on each implementation, because consistency. Here's how to implement it.
Tables are fed to the tableMobilizer function. Given that it is built on jQuery, this can be done for all tables on the page like so:
var tables = $(table);
tableMobilizer(tables);
You can definitely be more selective about how you mobilize tables with your selector if you need to be.
This will generate a new set of tables for each table passed in and append them after their respective source table. Each new table contains a row of a source table which is transformed with a 90 degree CCW rotation and paired with the table headings.
Old tables are dynamically classed with .hidden-small-down and new tables are classed with .hidden-medium-up for your CSS media queries.
New tables come classed with .mobile-tables (for a collection of all mobile tables generated by a single source table), .mobile-table (for each mobile table representation of a single source table row), .mobile-table-row (for a row in a mobile table), .mobile-table-key (for the first column of a mobile table), and .mobile-table-value (for the second column of a mobile table).
In your CSS, set up your media queries to hide / show the appropriate table views:
#media only screen and (min-width: 768px) {
.hidden-medium-up {
display: none;
}
}
#media only screen and (max-width: 768px) {
.hidden-small-down {
display: none;
}
}
With the media queries implemented, styling the tables is left to your discretion.
After Credits Scene
This is not a silver bullet solution. Visualizations using tabular data can be very complicated. As mentioned above, this solution isn't great for column-heavy tables. It also doesn't handle col and row spanning. As always, seriously consider whether or not you actually need to use a table in your layout (beyond the scope of this comment). If you do, this may be a good solution for mobilizing your tables.
Use media queries and width of your container and font sizes should be in percentage.
The problem here is actually with your table. As you can see, one of the bottom tables has an explicit width set, which is forcing the rest of your table to follow suit:
<table id="content_LETTER.BLOCK1" style="height: 21px;" border="0" width="798" cellspacing="0" cellpadding="0">
Notice the width="798". This will default to pixels. Get rid of any explicitly defined widths and the table should become closer to being responsive.
However, as others have said - responsive tables are tricky. Especially ones containing so many other nested tables (as in your example). You'll also need to address the responsiveness of any images within those tables, as these will likely force the table to be bigger than it needs to be. I would re-visit your whole layout here, and try and adopt a more responsive-friendly element to use throughout your page.
Update:
Please note that the reason #wildandjam's answer 'works' is essentially because he's overwritten the set width of all of your table elements. It's a quick fix but in my opinion it doesn't bridge the gap of understanding.
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.
In the following example,
<table style="width: 100%;"><tr>
<td>First Cell</td>
<td>Second Cell</td>
</tr></table>
How do I set the widths so that the first cell/column is exactly as wide as it needs to be to show the content of the first cell and let the second cell fill the rest of the width of the table?
I'm using a GWT HorizontalPanel to do this, so if there's either a html, css or gwt trick. Please let me know.
Thank you
Assuming that “as wide as it needs to be to show the content of the first cell” refers to width needs to show the content without line breaks, you can use something like this:
<table width=681 border><tr>
<td nowrap>First Cell</td>
<td width="100%">Second Cell</td>
</tr></table>
There is no guarantee that this will keep working, since requiring a cell to be 100% wide, yet include another cell with nonzero width, is an impossible requirement. But browsers currently do what seems to be closest to the requirement.
You could achieve the layout you’re aiming for without tables, as explained in this question:
xHTML/CSS: How to make inner div get 100% width minus another div width
HTML
<div class="two-columns">
<div class="fit-to-contents">First Cell</div>
<div class="fill-remaining-space">Second Cell</div>
</div>
CSS
.two-columns {
overflow: hidden;/* Contains descendant floats */
}
.two-columns .fit-to-contents {
float: left;
background: #ffd;
}
.two-columns .fill-remaining-space {
overflow: hidden;
background: #fdf;
}
I’m not sure if that would actually be appropriate for your use-case though, I’d need to see the context.
Tables take care of themselves in HTML. There is no need to force any cell to be any particular size.
What is it you're really trying to do?
What version of HTML are you using? (Hint: Upgrade to HTML5 and CSS!)
Just don't specify any widths at all (neither on the table nor on the cells) and use white-space: nowrap on your table cells.
Put a style of width:1px on the first cell. The table will then make the first cell as narrow as possible, without causing overflow.
Since "as narrow as possible" is the width of the word "First" in this case, you may want to throw in a white-space:nowrap too, otherwise it will display "First" and "Cell" on two lines.
Jsfiddle
On our site we have tables containing data. We like the column widths we get with a normal table, but we like the border-bottom of tds to stretch the entire width of the page like we get with CSS: table { width:100% }, as can be seen on a demo table widths page, which renders like this:
Is it possible to achieve the same column widths as with a normal (non-width-100%) table in a table where the border-bottom stretches the entire width?
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
We need a solution that works in at least IE6-8 + FF.
Btw, is there a better way (tm) of showing HTML snippets than linking to an external page? I can show just source, but having HTML rendered too is very illustrative.
This was originally posted on Webmasters, but following a suggestion there, I now (re)post it here.
I finally figured it out.
My first few attempts dealt with floating <td>s and <tr>s, but apparently I was on the right track but had the wrong element.
I think what you want to do is to float the <tbody>. The <table> will still be 100% width, so it will stretch the whole width of the page, but the <tbody> inside of it will act as a container for everything else, and floating it will release it from the shackles of the size of its <table> container width.
The downside of this is that you won't be able to use <thead> or <tfoot> elements, because you will no longer have any way to align them with the <tbody> content.
Try this out:
table {
width: 100%;
border: 1px #000 solid;
}
tbody {
float: left;
}
td {
border: 1px #000 solid;
}
You can use the new CSS properties min-width and max-width to bound the columns sizes without setting them explicitly.
To get a proportional version of what would be rendered when the table's width is not specified, I think you'd have to let it render normally (remove your table width setting) and then use javascript to read the column widths and resize.
Pulled this example of using jQuery to syncronize the column widths of two tables from another question:
$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
$(this).width($($("#t2 tr:first td")[i]).width());
})
Should be a pretty good starting point for scaling your column widths.
This is pretty ugly and not exactly what you asked for, but it works in Firefox and appears to get the same gist...
<html>
<head>
<style type="text/css">
td{background-color:blue;}
div{border:1px solid red;position:absolute;width:100%;}
</style>
</head>
<body>
<table>
<tr>
<td>asdf<div></div></td><td>hello blah blah</td>
</tr>
<tr>
<td>lorem ipsum dolor si amet</td><td>testing</td>
</tr>
</body>
</html>
I was looking for a similar answer to this question, however I don't understand what you mean by
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
But anyway, I found a solution to my problem. Not sure if it can be used here, but it solved my problem. Maybe it can be helpful to others.
I didn't add in another td. I just applied 100% to every last td with content.
So I could add a class to every last td to do that, or I could use the last-child selector to do it for me.
Something like:
table
{
width:auto;
}
table tr td:last-child
{
width:100%;
}