I'm visiting a page with a table listing a few rows. Since there is no option I'd like to hide the whole <tr> that got a label = Hide. I've spend a couple of hours but can't figure out how to achieve this with Stylus.
Example of the html on the page:
<tr id="xxx" class="basic-m" title="Y and X" label="Hide">
<td> Various text here </td>
</tr>
I'm not even sure if I should post this here, but can't think of anything else.
You can use the [attribute="value"] selector:
tr[label="Hide"]
This can be seen in the following:
tr[label="Hide"] {
display: none;
}
<table>
<tr id="xxx" class="basic-m" title="Y and X" label="Hide">
<td>Hidden</td>
</tr>
<tr id="xxx2" class="basic-m" title="Y and X" label="Shown">
<td>Shown</td>
</tr>
</table>
Related
Hi im having a issue with a simple problem. because for some reason i dont find anything wrong with my codes. Seems like my code is not reading my colspan. seems like this problem as been mark as duplicate. but i dont want to specify the width of the table since i want the table to be responsive and i use bootstrap table
<div>
<table class="table table-condensed">
<thead>
<tr class="text-uppercase text-contrail table-dark-head">
<th colspan="3">Spillage</th>
<th>Total</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Material Cost / Kg</td>
<td>
<input></input>
</td>
<td>
<input></input>
</td>
</tr>
<tr>
<td>Spillage at 0.5%</td>
</tr>
</tbody>
</table>
</div>
i put this code inside my template. please see the image for the result. The Total and Remarks should be on the right side. but it end up with balance width.
The tr id element is not working as a destination for links.
I am trying to create the link www.mywebsite.com/page1.asp#row1
Each of these rows has a picture and description that I need to have go to a distinct url.
The code below is the closest that I have gotten, but it is still not working and I do not know why.
I am building this website in Volusion. This HTML is going into a content block within an already built framework.
<table>
<colgroup><col width="30%">
</colgroup>
<tbody>
<tr id = "row1">
<td><div style="text-align: center;"><img src="/img1.JPG" alt="" align="top" border="0px"></div></td>
<td valign="top">1st Image</td>
</tr>
<tr id = "row2">
<td><div style="text-align: center;"><img src="/img2.JPG=" align="top" border="0px"></div></td>
<td valign="top">2nd Image</td>
</tr>
<tr id = "row3">
<td><div style="text-align: center;"><img src="/img3.JPG" alt="" align="top" border="0px"></div></td>
<td valign="top">3rd Image</td>
</tr>
</tbody>
</table>
The path for the image is wrong I guess. Maybe once check the path like there might be another folder you may have forgot to add (like image/img1.jpg). or maybe try ./ instead of /. Also img2 src is wrong. please correct it
How can I hide the whole row if a cell of the second column is empty Using CSS?
<table class="maintable" >
<tr>
<td class="tb_1c">Brand:</td>
<td class="tb_2c">{{ITEMBRAND}}</td>
</tr>
<tr>
<td class="tb_1c">Part Number: </td>
<td class="tb_2c">{{ITEMSKU}}</td>
</tr>
<tr>
<td class="tb_1c">Part Type:</td>
<td class="tb_2c">{{U_ITEMCAT}}</td>
</tr>
<tr>
<td class="tb_1c">Size</td>
<td class="tb_2c"></td>
</tr>
</table>
I have it working with Jquery
$("tr").filter(function(){return $("td:last",this).is(":empty");}).hide();
But the platform where the table is showing doesn't like it.
You can use the :not(), :has() and :empty selectors combined like this:
$("tr").not(":has(td:nth-child(2):not(:empty))").hide();
DEMO: http://jsfiddle.net/fA6S8/2/
As per using jquery:
$("tr:has(td.tb_2c:empty)").hide();
There is no CSS solution, because currently you cannot select an element on the basis of what elements it contains.
If you have problems in implementing a JavaScript solution, please ask a new question, showing the relevant HTML and JavaScript code that reproduce the problem.
In my asp.net project I need to print a page with some dynamic content.I followed this article http://www.dotnetcurry.com/ShowArticle.aspx?ID=92 to achieve that and it works fine as long as the content I need to print fits in one page.
But in case of lengthy content, when I click on print button I see a print preview with all the content that needs to be printed and when printed it just prints the content that fits into one page.So I think when I call 'window.print()' it just prints whatever that can fit into a page and does not check if there is anymore content left to print on another page.And I am not sure how do I set the page breaks to get the entire content printed,as it is dynamic content.
Could someone please help me with this?
Thanks
Edit:
Here is some sample HTML rendered.
<table class="Main">
<tr>
<td class=”left bold”>
Some text
</td>
<td>
<span id="Label">Label</span>
</td>
</tr>
<tr>
......
......
</tr>
......
......
......
<tr>
<td>
<table class= “productslist”>
<tbody>
<tr>....</tr>
<tr>....</tr>
<tr class=”productTextAlign”> ......</tr>
<tr class=”additionalOptions”> ..... </tr>
<tr class=”additionalOptions”>.....</tr>
<tr class=”additionalOptions”>.....</tr>
<tr class=”additionalOptions”>.....</tr>
<tr class=”additionalOptions”>.....</tr>
<tr>...</tr>
<tr class=”productTextAlign”></tr>
<tr class=”additionalOptions”>.....</tr>
<tr class=”additionalOptions”>.....</tr>
<tr class=”additionalOptions”>.....</tr>
<tr class=”additionalOptions”>.....</tr>
</tbody>
</table>
</td>
<tr>
</table>
the table with class is 'Main' is a html table and inside that there is another table with class 'productslist' which is actually a repeater. I am trying to apply the 'page break before' to this repeater using
table.productslist
{
page-break-before:auto;
}
which doesnt to work in FF6.0 and it seems to work fine in IE8.
You could use an Active X control for this:
http://www.meadroid.com/scriptx/docs/printdoc.asp
Alternatively you could take a CSS approach:
http://davidwalsh.name/css-page-breaks
https://stackoverflow.com/search?q=css+page+break
My HTML looks something like this:
<table class="disabled">
<tr>
<td>
<input blah blah>
</td>
<td>
<img id="reallyLongASP.NetID" etcetc/>
</td>
</tr>
</table>
In all with a class indicated as "disabled", I want to set visibility: hidden on the <img>. I can disable using the crazy id ASP.Net gives, but would like to do a general statement that affects every control in the <table>
Thanks for the help in advance,
If I understand you correctly, you'll just want to select all images within tables having the class specified:
table.disabled img { visibility:hidden }