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.
Related
We have a data table in a page and we want screen reader to read that as table. NVDA reads it as a data table by default. But JAWS does not seem to be able to identify the table element and reads the text from left to right row by row without indicating it is a table. I tried adding role="grid" and it did not work. I am wondering if I miss something.
The browser is IE11 and JAWS is 17.0.2727
<table tabindex="0" role="grid">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th aria-hidden="true"></th>
<th>Rate</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>12/19/16</td>
<td>
<span>10:50:09</span> - <span>12/19/16</span> <span>11:05:09</span>
</td>
<td aria-hidden="true"></td>
<td>
<span>54</span><span>mL/hr</span>
</td>
<td>
<span>13.5</span><span>mL</span>
</td>
</tr>
<tr>
<td></td>
<td>
<span>11:05:09</span> - <span>12/19/16</span><span>11:20:09</span>
</td>
<td aria-hidden="true"></td>
<td>
<span>48</span><span>mL/hr</span>
</td>
<td>
<span>12</span><span>mL</span>
</td>
</tr>
</tbody>
</table>
for a datatable:
a caption
th row header and column header cell
Scope or header id attribute to associate cells with the headers in tables
Example:
<table>
<caption>City proper and Metropole area of largest cities in the world</caption>
<tr>
<td> </td>
<th scope="col">Shanghai</th>
<th scope="col">Karachi</th>
<th scope="col">Beijing</th>
</tr>
<tr>
<th scope="row">City proper</th>
<td>24,256,800</td>
<td>23,500,000</td>
<td>21,516,000</td>
</tr>
<tr>
<th scope="row">Metropole area</th>
<td>34,750,000</td>
<td>25,100,000</td>
<td>24,900,000</td>
</tr>
</table>
I have the same issue, that JAWS 2019 is not allowing Cursor navigation in the table cells. Especially cursor up/down in the same column is one of the accessibilty test cases that fails here.
I assume this has something to do with the <thead> and <tbody> elements not expected by the commonly used JAWS table navigation. Only option available is to use TAB/Shift+TAB to step through each cell in a row until the next/previous row can be accessed.
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
I got this code:
<th:block th:if="${!#lists.isEmpty(partyInfoByUploaderList)}" th:each="pInfo : ${partyInfoByUploaderList}">
<h4 th:text="${pInfo.getCharName()}"></h4>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th:block th:if="${!#lists.isEmpty(pInfo.getCharColumnTitles())}" th:each="title: ${pInfo.getCharColumnTitles()}">
<td th:text="${title}"></td>
</th:block>
</tr>
</thead>
<tbody>
<tr>
<th:block th:each="val: ${pInfo.getCharColumnValues()}">
<td th:text="${val}"></td>
</th:block>
</tr>
</tbody>
</table>
And I got this result:
http://screenshot.ru/6dfbe559f905a17dff44d360b5d13f28
So this code correctly create table head, and dont parse table body.
BTW, after delpoy this code appear at another place:
<th:block th:each="val: ${pInfo.getCharColumnValues()}">
<td th:text="${val}"></td>
</th:block>
Web source code in browser:
http://screenshot.ru/9d3fab8030c5ca382ab81094e0c1ca86
Question #2:
Why this code produce TemplateProcessingException error?
P.S. Not enough reputation for images, so just links. Soz
According to Thymeleaf Documentation, <th:block></th:block> should wrap <tr></tr> and not the opposite. So you should try this :
<th:block th:each="val: ${pInfo.getCharColumnValues()}">
<tr>
<td th:text="${val}"></td>
</tr>
</th:block>
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