Here is a sample: JsFiddle
I have a table with 3 columns. Each should have 500px. But my table is resized to fit within the parent div (600px).
The width of my table should be 1500 (3x500) and a scrollbar should be displayed in parent div. How can I resolve this without adding a "width=XXX"?
<div id="container">
<table id="table">
<colgroup>
<col style="width: 500px"></col>
<col style="width: 500px"></col>
<col style="width: 500px"></col>
</colgroup>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
Apply min-width to the table tag (it doesn't work on col as explained in my comment on the OP).
Updated CSS:
#table {
table-layout:fixed;
margin:3px;
border-collapse:collapse;
min-width: 1500px;
}
Tested in Chrome and Firefox, and should be widely supported (according to caniuse).
Edit I've realised this answer doesn't actually answer your question, as it works around the col tag problem rather than solving it. I hope it helps anyway though.
Related
I have a simple table with two columns and five rows. I want it to be more keyboard accessible.
Left column is just text, right column are buttons that fill when focused/hovered.
Is there a way to change background color of entire row when tabbed (focused) and fill the button background color at the same time?
Edit: Added for focus
Assuming you have a table like this:
<table style="width:100%">
<tr class="hoverable-row">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr class="hoverable-row">>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="hoverable-row">>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
then in css
.hoverable-row:hover, :focus {
background-color: yellow;
}
Also, please read https://stackoverflow.com/help/how-to-ask on how to ask questions in a good way.
I'm struggling to make Aurelia virtual-repeat.for work with table and tr elements. Here is my markup of the modified Users page of aurelia skeleton app:
<table style="width:500px; height: 200px; overflow-y:scroll; display:block">
<tr virtual-repeat.for="user of users" style="width:500px; height: 50px">
<td>
${user.avatar_url}
</td>
</tr>
</table>
When I scroll the table down, the items below aren't rendered and I see just the empty space all over. What am I missing?
The issue was fixed in version 0.4.3, so the described scenario is working now
I am trying to identifying the table data for the below HTMLcode
<!-- You can use /goo.html to have your application be context sensitive -->
<!-- Add Any custom Tag Lib's required of your project down below -->
<div id="specialHandlingTableWrapper" style="height: 401px;">
<div id="specialHandlingTableHeader" style="width: 636px; position: relative; top: 0px; z-index: 10; vertical-align: top; height: 170px;">
<table id="specialHandlingSelectionTable" class="table table-striped table-hover table-striped data-table">
<thead>
<tbody>
<tr>
<td class="itemNameCell">SOD Catalog Test Code1 not inbound</td>
<td class="skuCell">SOD_CATALOG_SPECIAL_HANDLING</td>
<td/>
<td/>
<td/>
</tbody>
</table>
</div>
I need to get the 3rd column data and below is the xpath written for the same
#FindBy(xpath = "//table[#id='specialHandlingSelectionTable' and class='table table-striped table-hover table-striped data-table']/tr[1]/td[3]")
public WebElement FirstHandlinginstr;
And the interesting part is that I am seeing 2 matching nodes even after defining the tr and td values.Please help me here!
Your XPath expression does not match the input, so I'm surprised you're getting a result anyway. From what you stated in the comments, in seems that for some reason it returns elements of both the table header and body elements (which it shouldn't query at all).
For getting the third table cell of the first row in (each) table body, use this query:
//table[#id='specialHandlingSelectionTable']/tbody/tr[1]/tr[3]
If there are multiple table body elements, and you only want to query the first row of all of them:
(//table[#id='specialHandlingSelectionTable']/tbody/tr)[1]/tr[3]
If you want to query the table headers instead, replace tbody by theader.
How can I locate an element "1988" (the fourth line) in the following table:
<table border="0" width="820" cellpadding="2" cellspacing="0">
<tbody>
<tr valign="top">
<td class="default" width="100%">Results <b>1</b> to <b>10</b> of <b>1988</b></td>
</tr>
<tr valign="top">
<td class="default" bgcolor="#C0C0C0"> <font class="resultsheader"> ...etc
</tr>
</tbody>
</table>
IMPORTANT: I know one way that works (By.xpath):
driver.findElement(By.xpath("//td[#width='100%']")).getText();
However, this way does not ALWAYS work. The page is dynamic, so I need a way to locate that element no matter what changes happen to the page.
I tried the following but I am not sure:
By.xpath("//html//body//table//tbody//tr[3]//td//table//tbody//tr//td[2]//table[4]//tbody//tr[1]//td//b[3]"
If you can't change the HTML and want to use attributes for selection, you can write something like this:
//table[#border=0][#width=820]//tbody//tr[1]//td//b[3]
I'm working with Jasperrerports 3.5.1 and I have a html-styled text that I need to be printed in a PDF with the proper styles.
In the cell I want to print the styled text I have the markup property set to "HTML". I have created a this sample text:
<p>
<table border="0">
<tbody>
<tr>
<td>wewewe</td>
<td>eeeee</td>
</tr>
<tr>
<td>qwewewq</td>
<td>3333333</td>
</tr>
</tbody>
</table>
</p>
<p>4444</p>
but in the PDF it is printed as if, without any formatting.
Do you know how can I use html styles here, because using tables inside cells are one of the client's requeriments.
Thanks.
I know this question is old, but JasperReports only supports a small, very small set of HTML tags for styling. The list I found of those tags is:
b
br
font
u
i
sup
sub
li
See here for more info.
First, I'm not sure if case matters but make sure the value of the markup attribute for your textElement element in your JRXML is set to "html" (lowercase).
Second, the purpose of the markup attribute is to format text using HTML, it is meant to make text bold, italic, change font color or size, etc. Creating a table is not what this attribute is for.
You can create tables using standard JRXML, without resorting to embedding HTML, an example is bundled with the JasperReports download under ${JASPERREPORTS_HOME}/demo/samples/table
You can do something like
<textField >
<reportElement x="7" y="10" width="543" height="53"/>
<textElement markup="html">
<font size="10" pdfFontName="Helvetica" isPdfEmbedded="true"/>
</textElement>
<textFieldExpression class="java.lang.String"><![CDATA[$F{myElementName}]]></textFieldExpression>
</textField>
Then you can pass the following string programatically
<p style="color:red">
<table border="0">
<tbody>
<tr>
<td style="border: 1px solid">wewewe</td>
<td style="border: 1px solid">eeeee</td>
</tr>
<tr>
<td style="border: 1px solid" >qwewewq</td>
<td style="border: 1px solid">3333333</td>
</tr>
</tbody>
</table>
</p>
<p>4444</p>
I haven't found yet how to create css to apply it using classes inside a jasperreport text element.