I have a variation on a common question, and I'll try to explain it as best I can. It may take some visualization on your part. I have an HTML table (in reality there are tables within tables within divs within tables -- I'm using the JSGantt plugin). I'd like for the table header to be frozen only when I scroll down on the y-axis, but if I need to scroll right to see more data, I would like it to scroll right.
Meanwhile, as I scroll down (with the header row staying put), I'd like the first column of the table to scroll down with me. But when I scroll right, I want the first column to stay put (but as I mentioned above, the header row to scroll with me). So essentially I've frozen the first column only on the x-axis and the header row only on the y-axis.
I'll stop there for now. If anyone needs more clarification I can try to explain. I've tried this multiple ways, but I'm convinced that it may not be possible without some serious Javascript. The table, by the way, is contained within an outer div with set dimensions, hence the need for me to scroll the data.
Any help you can provide would be greatly appreciated.
This type of layout will help you on your way. Note there will be alot of formatting for the size of the cells to get them to match up
<div id="TableHeaderDiv">
<table id="TableHeader">
<thead>
<tr>
<th style="width:100px"> Column1 </th>
<th style="width:100px"> Column2 </th>
<th style="width:100px"> Column3 </th>
</tr>
<thead>
</table>
</div>
<div id "TableBodyMainDiv" style="overflow-y:auto">
<div id="TableBodyLeftDiv" style="float:left">
<table id="TableBody">
<tbody>
<tr>
<td style="width:100px"> Column2Value </td>
<td style="width:100px"> Column3Value </td>
</tr>
<!-- More rows here -->
<tbody>
</table>
</div>
<div id="TableBodyDiv" style="float:left; overflow-x: auto">
<table id="TableBody">
<tbody>
<tr>
<td style="width:100px"> Column2Value </td>
<td style="width:100px"> Column3Value </td>
</tr>
<!-- More rows here -->
<tbody>
</table>
</div>
</div>
probably would want to style the width's of the tds using CSS classes or Javascript
Related
I am building an app using Angular 2 and Bootstrap. My code is like below,
<div class="panel-body">
<table class="table table-striped table-bordered" style="width:100%;">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="width: 50%">Away Team Statistics</th>
<th style="width: 50%;">Home Team Statistics</th>
</tr>
<tr>
<th>Position</th>
<th>Team Name</th>
<th>Games Played</th>
<th>Wins</th>
<th>Loses</th>
<th>Draw</th>
<th>Points</th>
<th>Goals</th>
<th>Goals Against</th>
<th>Goal Difference</th>
<!-- Away Stats-->
<th>Wins</th>
<th>Loses</th>
<th>Draw</th>
<th>Goals</th>
<th>Goals Against</th>
<!-- Home Stats-->
<th>Wins</th>
<th>Loses</th>
<th>Draw</th>
<th>Goals</th>
<th>Goals Against</th>
</tr>
<tr *ngFor="let league of leagues">
<td>{{league.position}}</td>
<td> <img [src]="league.crestURI" [alt]="league.teamName" width="20px" height="20px">{{league.teamName}} </td>
<td>{{league.playedGames}}</td>
<td>{{league.wins}}</td>
<td>{{league.losses}}</td>
<td>{{league.draws}}</td>
<td>{{league.points}}</td>
<td>{{league.goals}}</td>
<td>{{league.goalsAgainst}}</td>
<td>{{league.goalDifference}}</td>
<!-- Away Stats-->
<td>{{league.away.wins}}</td>
<td>{{league.away.losses}}</td>
<td>{{league.away.draws}}</td>
<td>{{league.away.goals}}</td>
<td>{{league.away.goalsAgainst}}</td>
<!-- Away Stats-->
<td>{{league.home.wins}}</td>
<td>{{league.home.losses}}</td>
<td>{{league.home.draws}}</td>
<td>{{league.home.goals}}</td>
<td>{{league.home.goalsAgainst}}</td>
</tr>
</table>
</div>
Now when it loads the columns which are under the Away Team Statistics or Home Team Statistics gets outside the panel. It is due to variable number of columns may be. I have attached the screenshot for better understanding.
I want that the portion which gets outside of the panel/table should appear within the panel. width:100% or colspan="5" both are not working. How to fix that ?
The inline style on last two columns of table is wrong.
style="width: 50%"
Either add a bootstrap provided class table-responsive to your table or set a width to your table using:
width: 100%;
If you want to fill your div.panel-body with 12 column table you must add overflow-x: scrollbar to div or just format your table from the start with 5 columns. The table with 12 columns can have weird look. Also, you can use <tbody> and <thead> tags, they are very useful for understanding the code.
I am facing a problem when i try to add the margin-top or margin-bottom on div elements inside a table for generating pdf with mpdf.
I have something like this:
<table>
<tr>
<td>
<div style="margin-top: 20px;">Element1</div>
<div style="margin-top: 20px;">Element2</div>
...
</td>
<td>
<div style="margin-top: 20px;">Element4</div>
<div style="margin-top: 20px;">Element5</div>
...
</td>
</tr>
</table>
The margin styles are not converted.
I think it could be because there are too many nested elements and mpdf doesnt support them in some cases. Have someone already achieved such a problem?
Finally i have found another way to achieve this without using margin style.
I have just used the simple tag <br> to create space between my elements.
<table>
<tr>
<td>
<br><br>
<div>Element1</div>
<br><br>
<div>Element2</div>
...
</td>
<td>
<br><br>
<div>Element4</div>
<br><br>
<div>Element5</div>
...
</td>
</tr>
</table>
Mpdf has some limitations in CSS. Sometimes to achieve some tasks we have to think another way. Thanks.
I have a HandsOnTable table (with a couple of additions for user-requests) and a C3 chart (which needs to fill horizontal space) and can't get them living alongside each other nicely.
https://jsfiddle.net/horacebury/2vc606wx/13/
I /think/ these two DIVs should be able to be floated, but when I do they either don't (float) or stop the tooltip of the C3 chart OR stop some of the middle column editing from working:
<div>
<table class="tgh"><tr><td>Auxilliary Power</td></tr></table>
<div id="example"></div>
<table class="tg">
<tr>
<td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td>
</tr>
</table>
</div>
<div id="c3chart"></div>
Not sure how I did this, but I'm pretty sure it's a bodge:
https://jsfiddle.net/horacebury/2vc606wx/15/
<div style="float: right;">
<table class="tgh">
<tr>
<td>Auxilliary Power</td>
</tr>
</table>
<div id="example"></div>
<table class="tg">
<tr>
<td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td>
</tr>
</table>
</div>
<div id="c3chart" style="width: 65%;"></div>
I have a HTML table that has a fixed width of 1000 px (say), which is much greater than needed to accommodate the text in the table. It looks like:
The "Salary" column has right-aligned text, while the other columns have left-aligned text. (I've added the pink and green backgrounds so that you can see how it's getting laid out. It's not part of the actual table.)
How do I ask it to put equal whitespace between the columns? In other words, in the following screenshot:
I've added two green rectangles to illustrate the whitespace between the columns (more precisely, between the last visible pixel in one column to the first visible pixel in the next). I want these two green rectangles to be of the same width. How do I do that? Is it even possible in HTML?
Keep in mind that the text is dynamic — we don't know ahead of time what text will appear in each column, or how wide it will be.
Here's the code I used:
<table style="width:1000px;">
<tr>
<th style="text-align:left; background-color:#FFFFFF">Name</th>
<th style="text-align:right;">Salary</th>
<th style="text-align:left; background-color:#FFFFFF">Title</th>
</tr>
<tr>
<td style="text-align:left; background-color:#FFFFFF">Kartick</td>
<td style="text-align:right;">10</td>
<td style="text-align:left; background-color:#FFFFFF">Director of Nothing</td>
</tr>
<tr>
<td style="text-align:left; background-color:#FFFFFF">Neha</td>
<td style="text-align:right;">200</td>
<td style="text-align:left; background-color:#FFFFFF">Minister of Awesome</td>
</tr>
<tr>
<td style="text-align:left; background-color:#FFFFFF">Vijay</td>
<td style="text-align:right;">3000</td>
<td style="text-align:left; background-color:#FFFFFF">VP of Buzzwords</td>
</tr>
</table>
PS: Please ignore the use of inline styles. This is throwaway code.
There are two ways of doing this. You can apply a fixed width to the td element, however this requires you to know how many columns there are.
The second way is to apply table-layout: fixed to the table element.
http://codepen.io/alexmccabe/pen/gbzgNQ
To get equal whitespace, you will have to set explicit widths on the first two columns, and padding-left on the last column.
http://codepen.io/alexmccabe/pen/ByxpXb
Try like this: Updated Demo
CSS:
th, td{
width:333px; /* specify in px or % as per your requirement */
}
HTML:
<table> <!-- removed Width from table tag -->
<tr>
<th style="text-align:left; ">Name</th>
<th style="text-align:right;">Salary</th>
<th style="text-align:left;">Title</th>
</tr>
<tr>
<td style="text-align:left; ">Kartick</td>
<td style="text-align:right;">10</td>
<td style="text-align:left; ">Director of Nothing</td>
</tr>
<tr>
<td style="text-align:left; ">Neha</td>
<td style="text-align:right;">200</td>
<td style="text-align:left; ">Minister of Awesome</td>
</tr>
<tr>
<td style="text-align:left; ">Vijay</td>
<td style="text-align:right;">3000</td>
<td style="text-align:left; ">VP of Buzzwords</td>
</tr>
</table>
I have a three column layout, in which I have two tables connected back to back in the third column:
<div class="span2">
..
</div>
<div class="span7">
..
</div>
<div class="span3">
<h4>Betslips: </h4>
<table class="table table-stripped table-hover table-condensed" id="RecentContests">
<caption class="text-left">My Backs</caption>
<thead>
<tr></tr>
</thead>
<tbody>
<tr class ="success">
<td>King Rama</td>
<td>4.5</td>
<td>1000$</td>
<td>3500$</td>
<td>Matched</td>
<td>X</td>
</tr>
<tr class ="success">
<td>The Favorite</td>
<td>1.5</td>
<td>550$</td>
<td>750$</td>
<td>Matched</td>
<td>X</td>
</tr>
</tbody>
</table>
<table class="table table-stripped table-hover table-condensed">
<caption class="text-left">My Lays</caption>
<tbody>
<tr class ="error">
<td>Dare Devil</td>
<td>4.5</td>
<td>1000$</td>
<td>3500$</td>
<td>Pending</td>
<td>X</td>
</tr>
<tr class ="error">
<td>Irish Win</td>
<td>5.5</td>
<td>150$</td>
<td>2500$</td>
<td>Pending</td>
<td>X</td>
</tr>
</tbody>
</table>
When opened in browser it computes different widths for the tables, according to me it should be the same, any idea why is it happening and how to prevent it? I would like the second table to be the same width as of the first one.
By default, the tables will only be wide enough to accommodate their content, so there's little chance of them being the same width. To make them display the same width, consider setting a width via CSS. E.g.
table {width: 600px;}
or
table {width: 100%;}
You can also make the tables look more even and alike by adding
table {table-layout: fixed;}
It could be the span3 class in on the div, I've seen bootstrap, you might want to just size the table yourself.