I'm trying to make a table which is displayed properly on mobile devices.
To achieve this, I'm thinking about arranging the headers vertically like:
Header1 Information1
Header2 Information2
Header3 Information3
Header1 Information1
...
So, as you can see, I have to use ng-repeat so that everything from my data gets displayed.
This is my code for the table so far:
table class="table table-hover table-striped" class="ergTable" id="mobileTable">
<div class="mobileErgDiv" ng-repeat="data in responseData | limitTo:limit">
<tr>
<th>Title</th>
<td>{{data.title}}</td>
</tr>
<tr>
<th>Komponist</th>
<td>{{data.komponist}}</td>
</tr>
<tr>
<th>Instruments</th>
<td>{{data.instruments}}</td>
</tr>
</div>
</table>
The problem is, that no data gets display as a result of a non-working ng-repeat. I guess it's not possilbe to repeat a div in a table? That's because I have also tried to change the div to a tr, with the same result.
I would appreciate every possible solution.
Greetings,
Force0234
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
In my current project, I have a table with a variable amount of columns and rows, due to being generated in an *ngFor directive and the data comes from the backend. Because of this and the fact that there might be a lot of text in a cell, there is an overflow and not all columns can be displayed.
I initially solved it by wrapping the overflow to a new line, but because it can be a lot of text, some rows can be too large.
My idea is to show some sort of preview where the overflow is hidden (similar to overflow: ellipsis but where the row can be expanded to show all the information. This way, the rows will have a reasonable size, but all the information can be displayed. The data is stored in an object where the column names are string[] and the data is string[][].
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr>
<th *ngFor="let name of data.columnNames">{{name}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of data.data">
<td *ngFor="let item of row">
{{item}}
</td>
</tr>
</tbody>
</table>
How would you guys do this?
You could leave the table with overflowing ellipsis and on click on the row you could open a modal that shows all data to improve the UX in all screen resolutions.
EDIT: I did not construct this table myself. A table absolutely shouldn't be constructed this way and is a fix I'm implementing in the future. But the back-end code unfortunately depends on this exact table structure-each inner table has it's own class names and id's and trigger functions, etc.
I've got this problem working with a table made up of multiple tables - One table is the table itself, another table makes up the header, or <thead>, and another table makes up the <tbody>-there are also divs within the table cells (<td>) it looks like this:
<div id="myTableContainer">
<table id="myTable">
<thead>
<table id="myTableHeader">
<tr>
<td>
<div>Header Data 1</div>
</td>
<td>
<div>Header Data 2</div>
</td>
</tr>
</table>
</thead>
<tbody>
<table id="myTableData">
<tr>
<td>
<div>Table Data 1</div>
</td>
<td>
<div>Table Data 2</div>
</td>
</tr>
</table>
</tbody>
</table>
</div>
The problem is that there's some javascript working in the background to resize these table cells based on how much text is in them, but I can't align the header cells with the with the rows below them properly with CSS. I've experimented with the table-layout property and giving each td a max/min-width, but I'm stuck as to getting all the data & columns aligned because if many columns are created, the table gradually mis-aligns. What's more, both the inner tables are generated dynamically, so it's not as simple as restructuring the table as a whole. This table has proved very difficult to work with as it was developed for IE5 or 6 (works in Quirks mode all the way)
Does anyone have any ideas or sure-fire solutions on how to align this table properly? Preferably a CSS-based solution?
If you can't picture it, my table basically looks like this (and gets gradually worse if more columns are inside of it)
I hope I explained this well enough, if more info is needed I will provide
You should not have <table> tags inside <thead> and <tbody>. Your code should just look like this:
<div id="myTableContainer">
<table id="myTable" border="1">
<thead>
<tr>
<td>
<div>Header Data 1</div>
</td>
<td>
<div>Header Data 2</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>Table Data 1</div>
</td>
<td>
<div>Table Data 2</div>
</td>
</tr>
</tbody>
</table>
</div>
I would correct the old code but in case you don't intend to, look for below hack:
I cannot think of a pure CSS solution. But how about CopyCSS (http://upshots.org/javascript/jquery-copy-style-copycss)?
You can call your copyCSS (you can selectively copy only width property). Question is how to detect if width of column changes?
For that you will have to take help of onresize event (http://www.w3schools.com/jsref/event_onresize.asp). For that you have to dynamically add onResize event to at least first row of your second (i.e. inside ) table.
I have created two HTML grid tables but I am finding difficulty while placing/aligning them parallel to each other.
I am using align = right but the table is getting aligned downwards(one below the other) and not shifting to right in parallel order . Can anyone suggest where I am making mistake in my below code and how can I rectify it?
P.S: My below code issue can be checked by copying and saving it in a notepad say test.txt and renaming it as test.html and open it in IE or Firefox browser.
<table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
<table id="vv" class="easyui-datagrid" style="width:380px;height:auto;" align = "right">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
Here is your solution:
<div style="float:left;"><table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:left;"><table id="vv" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
You mean you want the tables side by side rather than one below the other?
You can either add a float: left to the first table (and not forget to clear after the second table), or put each of the tables in a div and set display: inline-block on those divs.
jsfiddle.net/S45CQ/
use float:left property and either reduce width of the table or put them in a wrapper div.
Also remove two closing body tag from your html.
The align right style on a table will align all elements inside to the right. (text and images etc in each column).
You need to add "float:left;" in the style.
See here: http://jsfiddle.net/TmC4C/
You also need to specify align="left" on your first table. Although you are much better off using floats instead.
I have changed your widths to 50%, as it could also be the widths of the tables are too large for the screen size, causing one to push the other below it.
Hi I need to create my table using like shown in the above image. Here I have given the code I tried. Could some1 please explain me the mistake I have made.
<table border="1">
<tr>
<td colspan="2" >Address
<tr><td>Address1</td><td>Address1</td></tr>
</td>
<td rowspan="2">Name</td>
</tr>
</table>
You scan cells row by row, and you mention a cell in your code as soon as you first hit it. Then you remember any cells that have colspan or rowspan, and when you reach their other parts in other rows, you don't put anything at all.
<table border="1">
<tr><td colspan="2">Address</td><td rowspan="2">Name</td></tr>
<tr><td>Address1</td><td>Address2</td></tr>
<tr><td></td><td></td><td></td></tr>
</table>