Multiple ngFor inside tables - css

Problem: td with image tag {{im.url}} shows images one below the other, but what I need is to show them side by side horizontally,
Is it possible to expand/merge that td to a size of first row so that I can put 5 images side by side ?
<tbody>
<tr *ngFor="let row of tasks; let i = index" colspan="6">
<td class="text-left" >
<b>
<u>{{row.lowtask}}</u>
</b>
<tr *ngFor="let t of row.time">
<td class="text-left">{{t.time1}}</td>
<td class="text-center">{{t.time2}}</td>
<td class="text-center">{{t.time3}}</td>
<td class="text-right">{{cnvert(t.cur1)}} </td>
<td class="text-right">{{convert(t.cur2)}} </td>
</tr>
<tr *ngFor="let im of row.images">
<td>
<img src="{{im.url}}" class="thumb"/>
</td>
</tr>
</td>
</tr>
</tbody>


You need to adjust your ngFor. Here you go:
<tbody>
<tr *ngFor="let row of tasks; let i = index" colspan="6">
<td class="text-left" >
<b>
<u>{{row.lowtask}}</u>
</b>
<tr *ngFor="let t of row.time">
<td class="text-left">{{t.time1}}</td>
<td class="text-center">{{t.time2}}</td>
<td class="text-center">{{t.time3}}</td>
<td class="text-right">{{cnvert(t.cur1)}} </td>
<td class="text-right">{{convert(t.cur2)}} </td>
</tr>
<tr>
<td *ngFor="let im of row.images">
<img src="{{im.url}}" class="thumb"/>
</td>
</tr>
</td>
</tr>
</tbody>


wrap your td in <ng-container>
<tbody>
<tr *ngFor="let row of tasks; let i = index" colspan="6">
<td class="text-left" >
<b>
<u>{{row.lowtask}}</u>
</b>
<tr *ngFor="let t of row.time">
<td class="text-left">{{t.time1}}</td>
<td class="text-center">{{t.time2}}</td>
<td class="text-center">{{t.time3}}</td>
<td class="text-right">{{cnvert(t.cur1)}} </td>
<td class="text-right">{{convert(t.cur2)}} </td>
</tr>
<tr>
<ng-container *ngFor="let im of row.images">
<td>
<img src="{{im.url}}" class="thumb"/>
</td>
</ng-container>
</tr>
</td>
</tr>
</tbody>

Related

Removing Extra Spacing Between Lines - Website Code

I'm trying to build a table in my email host for a future marketing email and I'm so darn close to finishing it up - but there's one last item that's stumping me. I'm trying to find a way to remove the extra spacing between the bullets - I know the text itself is single spaced like I want, but I don't want there to be double spacing of sorts between text items or bullets. Is there a small bit of code I can add into the below to adjust spacing between bullets to single or perhaps 1.5x?
<table>
<tbody>
<tr>
<td width="55"> </td>
<td style="vertical-align: top"><span style="line-height:1"><img height="30"
src="https://i.postimg.cc/52RGgKNg/63724-MYK-PP-Email-Announcement-02.png
" width="30" /></span></td>
<td width="20"> </td>
<td><span style="line-height:normal"><span style="font:14px arsenal"><span
style="color:#86c8c5">Cruelty Free</span></span>
</span>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td width="55"> </td>
<td style="vertical-align: top"><span style="line-height:1"><img height="30"
src="https://i.postimg.cc/52RGgKNg/63724-MYK-PP-Email-Announcement-02.png
" width="30" /></span></td>
<td width="20"> </td>
<td><span style="line-height:normal"><span style="font:14px arsenal"><span
style="color:#86c8c5">Vegan Friendly</span></span>
</span>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td width="55"> </td>
<td style="vertical-align: top"><span style="line-height:1"><img height="30"
src="https://i.postimg.cc/52RGgKNg/63724-MYK-PP-Email-Announcement-02.png
" width="30" /></span></td>
<td width="20"> </td>
<td><span style="line-height:1"><span style="font:14px arsenal"><span
style="color:#86c8c5">Refillable Bottle for Life</span></span>
</span>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td width="55"> </td>
<td style="vertical-align: top"><span style="line-height:1"><img height="30"
src="https://i.postimg.cc/52RGgKNg/63724-MYK-PP-Email-Announcement-02.png
" width="30" /></span></td>
<td width="20"> </td>
<td><span style="line-height:1"><span style="font:14px arsenal"><span
style="color:#86c8c5">Soothing Yuzu and<br />
Rice Water Formula</span></span>
</span>
</td>
</tr>
</tbody>
</table>

Div with background matches text height

Note: IE 8+ is a must :-(
What I currently have,
This is what I want,
It is about the part
<div style="background-color: red;height: 20px;width: 10px; ...
This is what I am trying - https://jsfiddle.net/w3tjbvef/3/
<table id="sometable" style="display: table;">
<tbody>
<tr class="s-row">
<td>Name</td>
<td>:</td>
<td>Name With Colour Yellow 1</td>
</tr>
<tr class="t-row">
<td>Tag</td>
<td>:</td>
<td>
<div style="vertical-align: middle;">
<div style="background-color: red;height: 20px;width: 10px;/* margin-top: 10px; */display: inline-block;"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
</td>
</tr>
<tr class="time-row">
<td>Column3</td>
<td>:</td>
<td>
<div>111111111</div>
</td>
</tr>
<tr class="owner-row">
<td>Column 4</td>
<td>:</td>
<td>
<div>asdasd</div>
</td>
</tr>
<tr class="desc-row">
<td>Column 5</td>
<td>:</td>
<td>
<div>Bag With Colour Yellow 1</div>
</td>
</tr>
</tbody>
</table>

<table id="sometable" style="display: table;">
<tbody>
<tr class="s-row">
<td>Name</td>
<td>:</td>
<td>Name With Colour Yellow 1</td>
</tr>
<tr class="t-row">
<td>Tag</td>
<td>:</td>
<td>
<div style="border-left: 10px solid red;padding-left: 10px;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
</td>
</tr>
<tr class="time-row">
<td>Column3</td>
<td>:</td>
<td>
<div>111111111</div>
</td>
</tr>
<tr class="owner-row">
<td>Column 4</td>
<td>:</td>
<td>
<div>asdasd</div>
</td>
</tr>
<tr class="desc-row">
<td>Column 5</td>
<td>:</td>
<td>
<div>Bag With Colour Yellow 1</div>
</td>
</tr>
</tbody>
</table>
<td>
<div style="border-left: 10px solid red; padding-left: 10px;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
</td>
I'd create a class and add it instead of inline styles.

You could do this by using display: flex on parent div of the element with red line. That will make all the child elements equal in height.
<table id="sometable" style="display: table;">
<tbody>
<tr class="s-row">
<td>Name</td>
<td>:</td>
<td>Name With Colour Yellow 1</td>
</tr>
<tr class="t-row">
<td>Tag</td>
<td>:</td>
<td>
<div style="display: flex">
<div style="background-color: red; width: 10px; margin-right: 10px"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
</td>
</tr>
<tr class="time-row">
<td>Column3</td>
<td>:</td>
<td>
<div>111111111</div>
</td>
</tr>
<tr class="owner-row">
<td>Column 4</td>
<td>:</td>
<td>
<div>asdasd</div>
</td>
</tr>
<tr class="desc-row">
<td>Column 5</td>
<td>:</td>
<td>
<div>Bag With Colour Yellow 1</div>
</td>
</tr>
</tbody>
</table>
You could also use CSS table layout.
<table id="sometable" style="display: table;">
<tbody>
<tr class="s-row">
<td>Name</td>
<td>:</td>
<td>Name With Colour Yellow 1</td>
</tr>
<tr class="t-row">
<td>Tag</td>
<td>:</td>
<td>
<div style="display: table">
<div style="background-color: red; width: 10px; margin-right: 10px; display: table-cell"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
</td>
</tr>
<tr class="time-row">
<td>Column3</td>
<td>:</td>
<td>
<div>111111111</div>
</td>
</tr>
<tr class="owner-row">
<td>Column 4</td>
<td>:</td>
<td>
<div>asdasd</div>
</td>
</tr>
<tr class="desc-row">
<td>Column 5</td>
<td>:</td>
<td>
<div>Bag With Colour Yellow 1</div>
</td>
</tr>
</tbody>
</table>

target the td element instead of the inner div, and give it an inline style like this;
<td style="border-left : 10px solid red; padding-left : 8px;">
Or you could use the same inline style on the inner div.

Try with border-left
<table id="sometable" style="display: table;">
<tbody>
<tr class="s-row">
<td>Name</td>
<td>:</td>
<td>Name With Colour Yellow 1</td>
</tr>
<tr class="t-row">
<td>Tag</td>
<td>:</td>
<td>
<div style="border-left: 10px solid red; padding-left: 5px;">
<div style="display: inline-block;"> </div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.</div>
</td>
</tr>
<tr class="time-row">
<td>Column3</td>
<td>:</td>
<td>
<div>111111111</div>
</td>
</tr>
<tr class="owner-row">
<td>Column 4</td>
<td>:</td>
<td>
<div>asdasd</div>
</td>
</tr>
<tr class="desc-row">
<td>Column 5</td>
<td>:</td>
<td>
<div>Bag With Colour Yellow 1</div>
</td>
</tr>
</tbody>
</table>

<table id="sometable" style="display: table;">
<tbody>
<tr class="s-row">
<td>Name</td>
<td>:</td>
<td>Name With Colour Yellow 1</td>
</tr>
<tr class="t-row">
<td>Tag</td>
<td>:</td>
<td>
<div style="vertical-align: middle;position:relative;">
<div style="background-color: red;position:absolute;top:0;bottom:0;width: 10px;"></div>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live.
</div>
</td>
</tr>
<tr class="time-row">
<td>Column3</td>
<td>:</td>
<td>
<div>111111111</div>
</td>
</tr>
<tr class="owner-row">
<td>Column 4</td>
<td>:</td>
<td>
<div>asdasd</div>
</td>
</tr>
<tr class="desc-row">
<td>Column 5</td>
<td>:</td>
<td>
<div>Bag With Colour Yellow 1</div>
</td>
</tr>
</tbody>
</table>

What you want can be done easily with CSS Grid Layout.
To do that you are gonna need to create 3 columns and two rows, with the width that matches your expectations.
":" would be indside the second column.

Access specific table cells

I have a table generated through a foreach (PHP) The problem is that I want to modify some specific cell on this table (in red) Knowing that I can not add a class, I must access it with a CSS style
EDIT :
I need add style to the first and last <td>, of the last <tr> with the .child class
Indeed, it is an ajax request that creates the <tr> with .child class So sometimes there are 2 <tr> and sometimes 10 <tr>
.tb-child .child th, .tb-child .child td, .details-close {
background: #f3f3f3;
text-align: center;
}
tbody > tr.child:last-child > td:first-child {
border-radius: 4px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="table-responsive table-padding tb-child">
<table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr class="5007963">
<td id="5007963"></td>
<td>
<a rel="details">5007963</a>
</td>
<td>25</td>
<td data-sort="0" class="sorting_1">
<div>25</div>
</td>
<td data-sort="68">
<div>42</div>
</td>
<td data-sort="-16">
<div>21</div>
</td>
<td></td>
</tr>
<tr class="5012152">
<td class="details-control details-close first-plan"></td>
<td>
<a rel="details">5012152</a>
</td>
<td>3000</td>
<td data-sort="-22.23">
<div>2333</div>
</td>
<td data-sort="-22.2">
<div>2334</div>
</td>
<td data-sort="-29.63">
<div>2111</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th></th>
</tr>
<tr class="child 5012152">
<td></td>
<td>
<a rel="bin">
AZERTY1
</a>
</td>
<td>1000</td>
<td data-sort="66.7">
<div>1667</div>
</td>
<td data-sort="16.7">
<div>1167</div>
</td>
<td data-sort="44.4">
<div>1444</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<td style="background: red"></td>
<td>
<a rel="bin">
AZERTY2
</a>
</td>
<td>1000</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-66.7">
<div>333</div>
</td>
<td style="background: red"></td>
</tr>
<tr class="5012277">
<td id="5012277"></td>
<td>
<a rel="details">5012277</a>
</td>
<td>10</td>
<td data-sort="-30" class="sorting_1">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
jsiddle
I tried several things like:
tbody > tr.child:last-child > td:first-child {
border-radius: 4px
}
But nothing works .. How to do?

This will work for you.
I have used nth-last-child(2) to target the td's in red.
My added Code:
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px;
}
.tb-child .child th, .tb-child .child td, .details-close {
background: #f3f3f3;
text-align: center;
}
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="table-responsive table-padding tb-child">
<table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr class="5007963">
<td id="5007963"></td>
<td>
<a rel="details">5007963</a>
</td>
<td>25</td>
<td data-sort="0" class="sorting_1">
<div>25</div>
</td>
<td data-sort="68">
<div>42</div>
</td>
<td data-sort="-16">
<div>21</div>
</td>
<td></td>
</tr>
<tr class="5012152">
<td class="details-control details-close first-plan"></td>
<td>
<a rel="details">5012152</a>
</td>
<td>3000</td>
<td data-sort="-22.23">
<div>2333</div>
</td>
<td data-sort="-22.2">
<div>2334</div>
</td>
<td data-sort="-29.63">
<div>2111</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th></th>
</tr>
<tr class="child 5012152">
<td></td>
<td>
<a rel="bin">
AZERTY1
</a>
</td>
<td>1000</td>
<td data-sort="66.7">
<div>1667</div>
</td>
<td data-sort="16.7">
<div>1167</div>
</td>
<td data-sort="44.4">
<div>1444</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<td style="background: red"></td>
<td>
<a rel="bin">
AZERTY2
</a>
</td>
<td>1000</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-66.7">
<div>333</div>
</td>
<td style="background: red"></td>
</tr>
<tr class="5012277">
<td id="5012277"></td>
<td>
<a rel="details">5012277</a>
</td>
<td>10</td>
<td data-sort="-30" class="sorting_1">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
But some of the styles are there which comes from bootstarap css so if you want to over-right them also you will have to use !important in your style.
sample -
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px !important;
}
Hope this was helpfull for you.

Bootstrap table with certain rows different widths

I have a table:
<table class="table table-bordered">
<tr>
<th class="text-center" colspan="3">
DRUG INFO
</th>
</tr>
<tr>
<td class="col-md-4"><span>{{item.fields[18].displayName}}</span></td>
<td class="col-md-3"><span>{{item.fields[25].displayName}}</span></td>
<td class="col-md-5"><span>{{item.fields[14].displayName}}</span></td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
</td>
<tr>
<td colspan="1">UD_UU_PKG</td>
<td></td>
<td colspan="1">SHORT_CYCL</td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>
</td>
<td>
</td>
<td>
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
</td>
</tr>
</tr>
</table>
Currently it looks like this:
I am trying to figure out how to make the middle cell on the bottom 2 rows go away so that the 2 fields will be equal in size (50/50). I have tried a ton of html properties (width, colspan etc) as well as trying to manipulate the columns with bootstrap (class="col-md-6").
What am I doing wrong and how do I fix it?
EDIT: This is what I get with Banzay's recommendations:

You need to plan the table that contains of 4 cells in each row, than set colspan respectively.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<tr>
<th class="text-center" colspan="4">
DRUG INFO
</th>
</tr>
<tr>
<td class="col-md-4"><span>{{item.fields[18].displayName}}</span></td>
<td class="col-md-3" colspan="2"><span>{{item.fields[25].displayName}}</span></td>
<td class="col-md-5"><span>{{item.fields[14].displayName}}</span></td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
</td>
<td colspan="2">
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
</td>
<tr>
<td colspan="2">UD_UU_PKG</td>
<td colspan="2">SHORT_CYCL</td>
</tr>
<tr>
<td colspan="2">
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>
</td>
<td colspan="2">
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
</td>
</tr>
</table>

Just play with colspans:
<table>
<tr>
<th colspan="6">
DRUG INFO
</th>
</tr>
<tr>
<td colspan="2">Effective date</td>
<td colspan="2">Minimum order</td>
<td colspan="2">Total package</td>
</tr>
<tr>
<td colspan="2">
<input type="text">
</td>
<td colspan="2">
<input type="text">
</td>
<td colspan="2">
<input type="text">
</td>
<tr>
<td colspan="3">UD_UU_PKG</td>
<td colspan="3">SHORT_CYCL</td>
</tr>
<tr>
<td colspan="3">
<input type="text">
</td>
<td colspan="3">
<input type="checkbox">
</td>
</tr>
</table>
And don't use "col-*-*" classes with table columns. They are designed to build responsive grids.

Aligning the table to the top of the page

Here is the plunk below, I'm trying to push the internal table to the top of the page tried different CSS but it doesn't get aligned to the top.
<td width="30%">
<div>
<h4>Category properties</h4>
<table style=>
<tbody>
<tr>
<td>
Name
</td>
<td>
{{selectedCategory.name}}
</td>
</tr>
<tr>
<td>Source</td>
<td>{{selectedCategory.source}}</td>
</tr>
<tr>
<td>Tenancy</td>
<td>{{selectedCategory.tenancy}}</td>
</tr>
<tr>
<td>Display Name</td>
<td>{{selectedCategory.displayName}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
http://plnkr.co/edit/C4vDxt09kmLPUPQNssL4?p=preview

Resources