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.
Related
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>
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.
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
This is supposed to be a sudoku table. I checked the css elements and everything appears to be in good working order. I think that I made mistakes in the colspan and rowspan in the table. The "greenBox and "goldBox" classes should make the background images span across 3 rows and 3 columns; however, in the sudoku 9x9 table only 9 squares are filled with the background images. Any help is greatly appreciated. Thank you for your time.
<table class="spuzzle">
<caption>Sudoku</caption>
<thead>
<tr>
<th> </th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</thead>
<tbody>
<tr>
<th>A</th>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td>5</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>B</th>
</tr>
<tr>
<th>C</th>
</tr>
<tr>
<th>D</th>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>7</td>
<td>2</td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>9</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td>9</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td>8</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>E</th>
</tr>
<tr>
<th>F</th>
</tr>
<tr>
<th>G</th>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td> </td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td> </td>
<td>6</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td>1</td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>H</th>
</tr>
<tr>
<th>I</th>
</tr>
</tbody>
`
</table>
The CSS is posted below. But I believe that it's functioning as it should.
table.spuzzle
{
border-collapse:collapse;
}
table.subTable
{
border-collapse:collapse;
}
table.spuzzle td
{
border:5px outset gray;
}
table.spuzzle th
{
font-size:8px;
color:gray;
}
tbody th
{
height:40px;
}
table.subTable td
{
font-size:20px;
color:blue;
width:40px;
height:40px;
text-align:center;
vertical-align:middle;
border:1px solid black;
}
td.goldBox
{
background-image:url("gold.jpg");
background-position:center center;
background-repeat:no-repeat;
}
td.greenBox
{
background-image:url("green.jpg");
background-position:center center;
background-repeat:no-repeat;
}
It appears your background images aren't large enough.
Try replacing images with background color to see if the basic affect is right then, look at what is going wrong with the images, perhaps remove background-repeat:no-repeat;. See http://jsfiddle.net/d6ZNF/1/ for using solid colors.
When debugging, also keep in mind that CSS is case-sensitive. I also recommend using a tool like Firebug for Firefox (free download) or developer tools in Chrome (hit F12) to inspect the suspect elements and see what, if any, CSS classes are applied to them.
I have a table and I need to format the currency in order for the . to be displayed always under each other.
This is the table:
<table class="data" cellspacing="0" cellpadding="5" border="0">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Field1</th>
<th>Field2</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr class="verticalDivider"></tr>
<tr>
<td>08 April 2010</td>
<td>value 1</td>
<td>GBP 20.00</td>
<td> </td>
<td>GBP 20.00</td>
</tr>
<tr>
<td>08 May 2010</td>
<td>value 2</td>
<td>GBP 100.00</td>
<td> </td>
<td>GBP 1020.00</td>
</tr>
<tr>
<td>19 May 2010</td>
<td>value 3</td>
<td> </td>
<td>GBP 50.00</td>
<td>GBP 970.00</td>
</tr>
</tbody>
</table>
How can I achieve this?
How does this look?
<style type="text/css">
.price {
text-align: right;
}
</style>
<table class="data" cellspacing="0" cellpadding="5" border="0">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Field1</th>
<th>Field2</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr class="verticalDivider"></tr>
<tr>
<td>08 April 2010</td>
<td>value 1</td>
<td class="price">GBP 20.00</td>
<td> </td>
<td class="price">GBP 20.00</td>
</tr>
<tr>
<td>08 May 2010</td>
<td>value 2</td>
<td class="price">GBP 100.00</td>
<td> </td>
<td class="price">GBP 1020.00</td>
</tr>
<tr>
<td>19 May 2010</td>
<td>value 3</td>
<td> </td>
<td class="price">GBP 50.00</td>
<td class="price">GBP 970.00</td>
</tr>
</tbody>
</table>
assuming you'll always print 2 decimal digits, I would define all my table <col /> then I'd assign text-align : right to that cols that contain prices (and padding-right to create space from border)
otherwise as specified in http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2 you could assign align="char" char="." to table cols (if you browser support it)
To have the currency symbol (GBP) AND the dots aligned you can do the following (tested on Chrome and Firefox, breaks on IE):
CSS file:
...
td.money {
text-align: right;
}
.currencySymbol {
float: left;
}
...
And your table cell would look like:
<td class="money">
<div class="currencySymbol">GBP</div>
970.00
</td>
Although it's dangerous (probably the reason why it breaks on IE), see: Is a DIV inside a TD a bad idea?
<td align="right">GBP 20.00</td>
<td align="right">GBP 100.00</td>
<td align="right"> </td>
I Guess thats what you are looking for as long as thee is ".00". If I were you, I would start using css even for this bit of code where you need to edit 3 places instead of one.