Primeng turbo table cell data overlapping other cells - html

How do I prevent primeng turbo table cell data from overlapping other cells,
I tried to add - [style]=" {'overflow':'hidden' }" to : <tr> , <td> and <div>, and none of these elements solved the overlapping..
anyone have an idea how to solve that?

Add class="ui-resizable-column" to each column and row. It prevents the data from other cells from overlapping into it (not it from overlapping into other rows), which is why in the example below, even the checkbox has it.
Example:
This will make the column headers not overlap:
<th *ngFor="let col of columns" class="ui-resizable-column">
</th>
<th style="width: 2.25em" class="ui-resizable-column">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
Then you do the same for rows:
<td *ngFor="let col of columns" class="ui-resizable-column">
</td>
<td class="ui-resizable-column">
<p-tableCheckbox [value]="selectedrow"></p-tableCheckbox>
</td>

Related

Angular + Bootstrap Tables with expandable 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.

Incorporating a table inside a table in HTML

I am trying to create an HTML table where there are four columns and any number of rows. Inside this table, the first two columns are just normal cells. The latter two columns can have multiple rows WITHIN a row in the top-level table. My issue is how I can properly align the column separators, even if the length of the content in each cell is variable.
My attempt tries to make use of:
<td colspan=2>
Example of what I am trying to do: https://jsfiddle.net/hurnzhmq/
The things I am missing in the JSFiddle are:
There is no divider between the two rows separating Content3A/Content4A from Content3B/Content4B - I tried using the "bottom-border:none" for the last child, but that did not seem to work.
The column separators between Content3A/Content3B and Content4A/Content4B are not lined up with the header's column separator, and do not touch the ends of the table (there are gaps).
Any advice on how I might go about fixing this would be greatly appreciated!
I think you should use rowspan instead colspan
you can use code below
<html>
<table border=1 >
<tr>
<td>Header1</td>
<td>Header2</td>
<td>Header3</td>
<td>Header4</td>
</tr>
<!-- Content -->
<tr>
<td rowspan="2">Content1</td>
<td rowspan="2" >Content2</td>
<td > Content3A</td>
<td > Content2</td>
</tr>
<tr>
<td > Content3B</td>
<td > Content2</td>
</tr>
</table>
</html>

Rowspan not using top row

I don't understand why my column won't span to the top and bottom rows I created. It is supposed to look like the "Today" column is taller on the top and bottom then the other columns.
It's a lot of code, and I wasn't sure what I should cut without deforming it all or adding a new variable (it needs a fluid height).
JSFiddle: http://jsfiddle.net/DaAwesomeP/aU9Le/
Basic HTML Layout:
<table id="weatherForecast">
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
<tr id="weatherForecast-row">
<td id="weatherForecast-DATE" class="weatherForecast-day weatherForecast-day-today" rowspan="3">
<!-- Cell Content for "Today" Here -->
<td id="weatherForecast-DATE" class="weatherForecast-day ">
<!-- Cell Content Here -->
</td>
</tr>
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
</table>
Here is an image that shows what I want:
The table markup violates the HTML table model rules, as the W3C HTML Validator tells you if you use it in HTML5 mode.
Since there are two cells on the second row, the first row should occupy two columns, too, so set colspan=2 on its td element.
And you cannot use rowspan=3, since there aren’t just enough rows in the table to span. Use rowspan=2 instead.
It’s difficult to tell what you actually want (a drawing would have helped), but the following would at least be valid HTML (note that I fixed a problem with duplicate id values too):
<table id="weatherForecast" border>
<tr class="weatherForecast-row-outer">
<td colspan=2></td>
</tr>
<tr id="weatherForecast-row">
<td id="weatherForecast-DATE" class="weatherForecast-day weatherForecast-day-today" rowspan="2">
<!-- Cell Content for "Today" Here -->
<td id="weatherForecast-DATE2" class="weatherForecast-day ">
<!-- Cell Content Here -->
</td>
</tr>
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
I got rid of the all of the rowspan and just gave one cell display: block. I can then adjust the height of that cell specifically without changing the others. I used calc to provide a variable height.

set columns in table to invisible

The two tables are inside one div (please see code below for an cut out of the code from bottom table), I would like to make the first column of the bottom div invisible....any ideas? thanks for replies
<table align="center" class="detailstable" style="width:100%">
<tr>
<th style="width:70%;"></th>
<th style="text-align:left;">Summary</th>
<th style="text-align:right;"></th>
</tr>
<tr>
<th style="width:70%;"></th>
<td style="text-align:left; width:100px;">Labour</td>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(LabourTotal)%></th>
</tr>
</table>
if you want to make it look like its 'merged' with the cell that contains the total value, use CSS 'border-right-style' on the desired cell, for example:
<th style="width:70%; border-right-style:none;"></th>
Don't create the unwanted column, and instead position the second (now two column wide) table using the style. I would probably have removed the width from the second table and replaced it with float:right to make it align to the right...

Recreate Table with Divs

I'm trying to recreate a table with divs. I want to be able to put elements between the rows so that when a user clicks on a specific row, a description of the data in the row can appear between the rows.
I need the columns to align even if there are elements between the rows. I also need the "cells" to word wrap or push the boundaries similar to tables. The table that I am trying to recreate is 100% width and the page also has expanding widths. I can make the table be a set width, but I'm supporting several screen sizes so keeping the 100% would be best
Thanks for any help!
EDIT:
Here is what I ended up doing (MVC With Razor):
<table style="width: 100%">
<tr>
<th>
Data1
</th>
<th>
Data2
</th>
<th>
Data3
</th>
<th>
Data4
</th>
<th>
Data5
</th>
<th>
Data6
</th>
</tr>
#foreach (var item in Model)
{
<tr id="#item[0]">
<td>
<span style="padding-left: 5px">+</span> <span style="padding-left: 15px">#item[0]</span>
</td>
<td>
#item[1]
</td>
<td>
#item[2]
</td>
<td>
#item[3]
</td>
<td>
#item[4]
</td>
<td>
#item[5]
</td>
</tr>
<tr id="Expander#item[5]" style="display: none">
<td colspan="6">
</td>
</tr>
}
</table>
Then I just did some jquery to control all of the expanding/contracting
Worked great!
If you have tabular data stick to tables. For what you want to do take a look at the colspan attribute. It enables a table cell to span over multiple columns (even all of them).
For maximum width, set width:100% on the table.
Good luck,
Alin