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.
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.
I have a table which uses bootstrap:
<table class="table table-bordered">
<tr>
<th class="text-center" colspan="4">
DRUG INFO
</th>
</tr>
<tr>
<td class="col-md-3"><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-3"><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" class="text-center">
<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>
My issue is that this table's responsive attributes are not fixing the layout early enough (and a high enough pixel width).
As the width reduces the table is supposed to move to the bottom of the page for responsive design like this:
But there is a windows of width where this doesn't happen and the table overlaps it's parent:
I have been looking for custom media queries but there aren't any for this section. I have also been working with column widths but reducing them makes the problem worse for some reason.
How would I fix this issue?
what I'm trying to do is create a marque of images going up to down
Here is my code
<table>
<tr>
<td></td>
<td style="table-layout:fixed;border-collapse:collapse;">
<marquee direction="down">
<table >
<tr>
<td>
<img src="../Advertise/Add1.jpg" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add2.jpg" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add3.jpg" />
</td>
</tr>
</table></marquee>
<td/>
</tr>
</table>
Add1,Add2,Add3 are inside a folder
Now the problem is the size of the image was same as it is actually
i want to wrap it according to the size of my <td>
please give me suggestions how to do it
thanks in advance.
set height and width to 100% as mentioned below :
<img src="../Advertise/Add1.jpg" style="height:100%;width:100%" />
HTML:
<table>
<tr>
<td></td>
<td style="table-layout: fixed; border-collapse: collapse;">
<marquee direction="down">
<table>
<tr>
<td>
<img src="../Advertise/Add1.jpg" style="height: 100%;width: 100%" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add2.jpg" style="height: 100%;width: 100%" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add3.jpg" style="height: 100%;width: 100%" />
</td>
</tr>
</table>
</marquee>
</td>
</tr>
</table>
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.