I have a table. The row of the table has checkbox and others control. I only want to print the row which the checkbox is check. I have searched the web and didn't find the solution. Hope someone can help me. thanks in advance
There is my css for pint
#pageTest .dgrd td input[type=checkbox]:checked+tr::before{
display: none;
}
There is my html:
<table>
<tr class="dgrdRed">
<td style="width: 140px;">
<span class="checkBoxClass"><input name="dgrd$ctl15$chkCheckBox" id="dgrd_ctl15_chkCheckBox" type="checkbox"></span>
</td>
<td>
<span id="dgrd_ctl15_lbl"><br>BOWEE</span>
</td>
</tr>
<tr class="dgrdRed">
<td style="width: 140px;">
<span class="inputCheckBox"><input name="dgrd$ctl16$chkCheckBox" id="dgrd_ctl16_chkCheckBox" type="checkbox"></span>
</td>
<td>
<span id="dgrd_ctl16_lbl"><br>BOLT</span>
</td>
</tr>
</table>
Use #media print CSS...
#media print {
#pageTest .dgrd td input[type=checkbox]:checked+tr::before{
display: none;
}
}
Related
I have 2 tables that I want to display side by side. So I set the display style property as display: inline-block. The problem is, on both tables, the columns are not taking the full width of the table. There is/are unseen cell(s). Interestingly this does not happen if I remove the DOCTYPE HTML line from the top of the page. The red marked area in the screenshot is my concern.
I have tried setting the font size to 0 of the "tr" and then add my desired font size to the "td". Also tried adding negative right padding/margin, but could not get it to work. Please suggest!
Empty cells at the right of table:
<table id="attn" style="display: inline-block; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="display: inline-block; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
To fix the problem you can use display: inline-table instead of display: inline-block.
Explanation: <table> by default receives display property display: table. This is how it arranges rows/columns and determines how it'll be displayed on the page.
The moment you change that to display: inline-block, <table> looses its property to be a proper table according to CSS. So <tr> <td> etc. don't work as expected, as they shouldn't do inside a display: inline-block element. That's why display: inline-table solves the issue.
What about float instead of inline. Worked for me in IE, Chrome and Firefox.
<!DOCTYPE html>
<table id="attn" style="float:left; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="float:left; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
Hi I'm trying to colour the tds of my table, but I want to specifically colour the background text within the td instead of the whole block. Is this possible ? I currently can target the images correctly but the text is a bit tricky.. http://jsfiddle.net/8gr2q5vm/3/
<td style="background-color: grey;"><img class="picture" src="#"></img></td>
<td class="birthday">Birthday: 1/1/1921 </td>
<td class="name">Name: barry</td>
</tr>
</table>
Wrap your text in a span and then style your span element.
<td style="background-color: grey;"><img class="picture" src="#"></img></td>
<td class="birthday"><span style="background-color: grey;">Birthday: 1/1/1921</span></td>
<td class="name"><span style="background-color: grey;">Name: barry</span></td>
</tr>
</table>
It would be better if you would have an external CSS file. And then you could import it and do some general styling like this:
td img, td span {
background-color: grey;
}
.text {
background: #ff3300;
}
<table>
<td style="background-color: grey;">
<img class="picture" src="#"></img>
</td>
<td class="birthday"><span class=text>Birthday: 1/1/1921</span>
</td>
<td class="name"><span class=text>Name: barry</span>
</td>
</tr>
</table>
Im still pretty new to AngularJS. Im trying to change the color of the table element so that its yellow if the user voted on this choice.
<div ng-show="poll.userVoted">
<table class="result-table">
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table ng-if="choice.text == poll.userChoice.text" style="background-color: yellow; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td>{{choice.votes.length}}</td>
</tr>
</table>
<table ng-if="choice.text != poll.userChoice.text" style="background-color: lightblue; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td>{{choice.votes.length}}</td>
</tr>
</table>
</td>
</tr>
</table>
This is done by using ng-class.
Use ng-class on your td like this:
<td ng-class="{yellowstyle: choice.text==poll.userChoice.text}">...</td>
that will put the css class yellowstyle on the item when your condition is true.
And in your example:
<table class="result-table">
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table style="width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td ng-class="{yellowstyle: choice.text==poll.userChoice.text, lightbluestyle: choice.text!=poll.userChoice.text}">{{choice.votes.length}}</td>
</tr>
</table>
</td>
</tr>
</table>
with a style.css file that has:
.yellowstyle {background-color: yellow;}
.lightbluestyle {background-color: lightblue;}
I have the following html structure where I am displaying some details inside an html table.
<table cellspacing="15">
<tr>
<td>
<img src="Images/user1.png" />
<label>
User</label>
</td>
<td>
John
</td>
</tr>
<tr>
<td>
<img src="Images/version1.png" />
<label>
Old ID</label>
</td>
<td>
345345
</td>
</tr>
<tr>
<td>
<img src="Images/version3.png" />
<label>
New ID</label>
</td>
<td>
367976
</td>
</tr>
</table>
I want to add margin-top to the image so that the image will be shifted downward by some 3 or 4 pixel but the CSS is not having any effect. Please help.
Also I found that cellspacing is not a valid attribute in HTML5. Any alternate property to achieve the same effect.?
Adding a negative bottom margin to your image
(I generally avoid using negative margins as much as possible, but in this case it's a quick fix and won't effect the text next to it) :
td img {
margin-bottom:-4px;
}
Its working for me.. Anyhow you can try like this LINK, if you want to place img and text in same line
CSS:
td,td img {
line-height:28px;
vertical-align:middle;
}
Alternative for cellspacing is
table {
border-collapse: separate;
border-spacing: 15px;
}
Aligning image:
You can use vertical-align:middle.
See DEMO here.
Margin-top should work correctly, but it probably moves down tha label too.
Possible solution is to use positioning, so:
img {position: relative; top: 4px;}
you can do this.
Just remove <lable> tag & add valign="top" in <td>
<table cellspacing="15">
<tr>
<td valign="top">
<img src="Images/user1.png" />
User
</td>
<td>
John
</td>
</tr>
<tr>
<td valign="top">
<img src="Images/version1.png" />
Old ID
</td>
<td>
345345
</td>
</tr>
<tr>
<td valign="top">
<img src="Images/version3.png" />
New ID
</td>
<td>
367976
</td>
</tr>
</table>
Suppose I have a table like so:
<table>
<tr>
<th>Type</th>
<th colspan="3">Type Info</th>
</tr>
<tr class="typeA">
<td><input name="type[0]" /></td>
<td class="group1"><input name="A[0]" disabled /></td>
<td class="group2"><input name="B[0]" disabled /></td>
<td class="group2"><input name="C[0]" disabled /></td>
</tr>
<tr class="typeB">
<td><input name="type[1]" /></td>
<td class="group1"><input name="A[1]" /></td>
<td class="group2"><input name="B[1]" disabled /></td>
<td class="group2"><input name="C[1]" disabled /></td>
</tr>
<tr class="typeC">
<td><input name="type[2]" /></td>
<td class="group1"><input name="A[2]" disabled /></td>
<td class="group2"><input name="B[2]" /></td>
<td class="group2"><input name="C[2]" /></td>
</tr>
</table>
There are certain data combinations that are not valid, so we disable the inputs. In this case, I believe the data makes semantic sense as a table - I am not just using a table for layout purposes.
What I would like to do is hide the disabled cells, and have the cells with the non-disabled elements fill the space formerly taken by the now hidden cells.
I can accomplish the hiding with the following css:
.typeA .group1, .typeA .group2 {
display:none;
}
.typeB .group2 {
display:none;
}
.typeC .group1 {
display:none;
}
However, this gives me:
|_____Type____|____________,__Type Info__,__________|
|_____________|
|_____________|____________|
|_____________|____________|_____________|
What I want is:
|_____Type____|____________,__Type Info__,__________|
|_____________|
|_____________|____________,_____________,__________|
|_____________|____________,_____________|__________|
(| represent cell boundaries, , represents where a single cell crosses the layout cell boundaries.
What css can I use to get the desired td to expand to fill the horizontal space vacated by the hidden td elements?
There does not appear to be a way to do this using solely CSS. It seems that to accomplish what I want, the html structure has to be modified in one way or another.
I found two options:
Do a row by row modification of the table structure, removing hidden td elements and adding appropriate colspan attributes to the visible td elements
Place all of the "group1" and "group2" inputs in the same cell, with additional div structures that can be styled as table cells.
For the second option, e.g.
<table>
<tr>
<th>Type</th>
<th>Type Info</th>
</tr>
<tr class="typeA">
<td><input name="type[0]" /></td>
<td>
<div class="group1">
<input name="A[0]" />
</div>
<div class="group2">
<div>
<input name="B[0]" />
</div>
<div>
<input name="C[0]" class="staticSize" />
</div>
</div>
</td>
</tr>
<tr class="typeB">
<td><input name="type[1]" /></td>
<td>
<div class="group1">
<input name="A[1]" />
</div>
<div class="group2">
<div>
<input name="B[1]" />
</div>
<div>
<input name="C[1]" class="staticSize" />
</div>
</div>
</td>
</tr>
<tr class="typeC">
<td><input name="type[2]" /></td>
<td>
<div class="group1">
<input name="A[2]" />
</div>
<div class="group2">
<div>
<input name="B[2]" />
</div>
<div>
<input name="C[2]" class="staticSize" />
</div>
</div>
</td>
</tr>
</table>
For the second option css, something like the following:
table {
width:100%;
}
.typeA .group1, .typeA .group2 {
display:none;
}
.typeB .group2 {
display:none;
}
.typeC .group1 {
display:none;
}
.typeC div.group2 {
display:table;
border-collapse:collapse;
}
.typeC div.group2>div {
width:100%;
display:table-cell;
}
input:not(.staticSize) {
width:100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
Try
visibility: hidden;
That should keep it in the layout.