I am stuck working on this project that has to be produced as HTML tables.
The page has an outer table with 2 rows: a header/branding cell and then a cell that holds a second table.
This table is dynamically generated by an app and might have any number of rows and columns. The app determines the number of rows and columns requested and spits out the html accordingly.
Every created cell holds another table as a "widget" with the title row and a content row, as shown below. The content row holds an SVG chart.
<table class="widget">
<tbody>
<tr id="trtitlewidget22">
<td id="titlewidget22" class="widget-header"><h3>Enquiries</h3></td>
</tr>
<tr>
<td class="widget-content" id="widget22">
[this would be a js svg chart]
</td>
</tr>
</tbody>
</table>
Here is a fiddle of the whole layout minus the charts (i used filler text). Here's a screen cap:
What I need to do is have the "widget table" always fill its enclosing table cell, as the page is resized and the table flexes. I have tried height 100% to no avail.
I couldn't figure a css-only solution. I would go for a javascript approach. Here's how you can do it easily with JQuery. If you want it vanilla, is possible either:
var fitHeight = function() {
$("table.widget").each(function() {
$(this).removeAttr("style");
});
//It has to be separate from the remove loop, so the height will be re-applied.
$("table.widget").each(function() {
$(this).height($(this).parent().height());
});
}
$(window).resize(fitHeight);
$(document).ready(fitHeight);
http://jsfiddle.net/5LeK6/5/
Related
I want to achieve the below result without using jquery:
The table for which data should be scrollable for both axis.
The first column (table header) and first row of the table should be a fixed and with auto adjustable width for the column as per the data entered, similar to google spreadsheet
Above image shows what I have tried, the element containing the table has overflow-x: auto for the horizontal scroll and the element has style="display:block;height:400px;overflow-y:auto" for the vertical scroll for fixed table header. Also some elements contain mat-elements
Following is the html code for above image:
<div style="overflow-x:auto">
<table>
<thead>
<tr>
<th>#</th>
<th>Textbox_1</th>
<th>Textbox_1</th>
<th>Multichoice</th>
</tr>
</thead>
<tbody style="display:block;height:400px;overflow-y:auto">
<tr>
<td>1</td>
<td><div>John</div></td>
<td><div>Ron</div></td>
<td><div><mat-select><mat-option>One</mat-option>
<mat-option>Two</mat-option>
</mat-select>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Expected Result:
Any help is greatly appreciated.
I think it is not possible with CSS only. You might need support of JavaScript/JQuery. Check out this light weight plugin. It will help you for sure.
https://github.com/nitsugario/jQuery-Freeze-Table-Column-and-Rows
I used this answer to create a horizontal table as i have a fixed amount of horizontal rows but N number of vertical columns. This works really well but because the HTML rows are actually columns, the height between cells does not stay consistent in the displayed rows.
By adding the following to the answer provided, I'm able to ensure each column fits on the page, causing text wrap to occur, but then the rows height don't necessarily match.
td {
max-width: 200px;
}
JSFiddle example.
In the fiddle example above, how do I make the cell with "Title" and the cell with "Braveheart" match the height of the third cell in that row?
Hint: the correct answer is not to hard code the height of the first two cells, since I have no idea how long another cell may be when it is added later.
EDIT
I can't use JavaScript as the html never hits anything client side. It's rendered and then passed into a PDF creation utility.
This may not be the best performing answer, or even the most concise, but it could start you in the right path (fiddle):
<div>
<table>
<tbody>
<tr>
<th class="title">Title</th>
<th class="year">Release Year</th>
<th class="director">Director</th>
</tr>
<tr>
<td class="title">Braveheart</br>part 2</td>
<td class="year">1992?</td>
<td class="director">Mel Gibson?</td>
<tr>
<td class="title">Some movie with a ridiculously long title. I mean, like two paragraphs for a title, which is ridiculous of course but it proves my point.</td>
<td class="year">2015</td>
<td class="director">The Great Anton - Director of the year 2012</td>
</tr>
</tbody>
</table>
</div>
$(document).ready(function(){
function getMaxHeight(e){
var maxHeight = Math.max.apply(null, $(e).map(function ()
{
return $(this).height();
}).get());
return maxHeight;
}
$('tr').each(function(){
$(this).find('.title').css("height", getMaxHeight('.title'));
$(this).find('.year').css("height", getMaxHeight('.year'));
$(this).find('.director').css("height", getMaxHeight('.director'));
});
});
The max height function came from this SO answer.
I have over 40+ rows of html table that span across 2-3 pages. I have only two small columns in the table so I thought of fully occupying the space in the page by merging two page's table data in one page to save paper when printing. Let's say, if the 24th row is last row in first page, I want the 25th row to appear in the second page column (not table column) of the same page as depicted in the screenshot.
I used Yii2 framework's Gridview to render the data. The generated html is as below.
<div id="w0" class="grid-view"><div class="summary">Total <b>50</b> items.</div>
<table class="table table-striped table-bordered"><thead>
<tr><th>Appt.#</th><th>Patient Name</th><th>User Phone No</th></tr>
</thead>
<tbody>
<tr data-key="93"><td>1</td><td></td><td>abc</td></tr>
<tr data-key="94"><td>2</td><td></td><td>xyz</td></tr>
.
.
.
</tbody></table>
</div>
You could try rendering the container using columns, but support is pretty flaky.
#media print
{
#w0
{
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}
}
I have item collection and I want to display each item object inside it in a table.
I have an image to display for each item as well.
To do so, i decided to use < tbody ng-repeat>, with that,
each image can occupy 3 rows cell
The issue comes when i need to display calculations in another column, which is an array object reside for each item.
you can see it here http://jsbin.com/nifazanehe/3/edit?html,css,js,output
with background color red.
the first two index of calculations object is hard coded and the rest is using ng-repeat. It solves the problem yet it looks buttugly! i hate it!
any suggestion?
other solutions i can think of :
to nest a table so i can do ng-repeat for that individual row
or maybe just a simple
< ul>< li ng-repeat>
after empty out that section of rows and columns using rowspan and colspan
you can work with np-repeat-start and ng-repeat-end directive
<table>
<tbody>
<tr ng-repeat-start="demo in vm.demoArray">
<td >{{demo.attr1}}</td>
<td>{{demo.attr2}}</td>
</tr>
<tr ng-repeat-end>
<td>{{demo.attr1}}</td>
<td>{{demo.attr2}}</td>
</tr>
</tbody>
</table>
This is the html code-
<table style='min-width:60%;height:25px;'>
<tr>
<td><data:post.title></td>
<td id='date-and-author' style='position: relative;bottom: -2px;white-space:nowrap;'><data:post.author><data:post.dateHeader></td>
</tr>
</table>
This gives the following result-
How to make html table by admin on 8/1/13
You can see title, admin and date all are in one line. The problem is, when device has maximum width of 480px then 'by admin on 8/1/13' run out of 100% window size. If i make white space= normal in id #date-and-author then it is displayed like:
by admin
on 8/1/13
Which is not good. I want, when device has maximum width of 480px then 'by admin on 8/1/13' will displayed in new row. What css should i place in #media only screen and (max-width:480px){..} so that, id #date-and-author will be displayed in new row as:
How to make html table
by admin on 8/1/13
I don't want to use div element. Please help me.
You can tell the td to display as a table row (but you need to apply that to both tds so I gave the first td and ID too, or you could assign all tds within that table):
<table style='min-width:60%;height:25px;'>
<tr>
<td id='title'><data:post.title></td>
<td id='date-and-author' style='position: relative;bottom: -2px;white-space:nowrap;'><data:post.author><data:post.dateHeader></td>
</tr>
</table>
#media only screen and (max-width:480px){
td#title, td#date-and-author { display:table-row; }
}