I have
<div id="aa">
<img src="." height="17" alt="example1" title="">
<table>
<tbody><tr>
<th></th>
<td></td>
</tbody>
</table>
<img src="." height="17" alt="example2" title="">
<table>
<tbody><tr>
<th></th>
<td></td>
</tbody>
</table>
<img src="." height="17" alt="example3" title="">
<table>
<tbody><tr>
<th></th>
<td></td>
</tbody>
</table>
</div>
I only want to select the attributes "alt" values "example1, example2, example3" of images. How can I get them.
I presume you mean that you want to select all the images (in CSS) that contain example* in the alt attribute, so you can style them. (and that you don't mean that you actually want tot select the text set in the alt attribute)
You can use the attribute selector:
img[alt~="example"] {
border: 1px solid red;
}
To select some attribute use selector img[alt="example1"], img[alt="example2"], img[alt="example3"]
Related
I'm trying to make a centralize button in HTML e-mail. The tricky part here is my wish the button to be as wide as its content. The following code works perfect except in Outlook.
Here is the HTML:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td style="width:1%;white-space:nowrap">
<a href="#" style="text-decoration:none">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="margin-top:16px;padding:8px 16px 8px 16px;background-color:#5091cd;border-radius:2px">
<a href="#" style="font-size:15px;letter-spacing:.04em;color:#ffffff;text-transform:uppercase;text-decoration:none;display:block;text-align:center;max-width:600px;overflow:hidden;text-overflow:ellipsis">
Go to platform
</a>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
The expected result is:
The actual visualization:
Increasing the width of the td tag will help you adjust the content in one line.
<style="width:20%;white-space:nowrap">
if you want to take the full width of the container, make td width auto.
currently, td tag width is deciding how the content text will wrap.
I'm trying to create (using Semantic-UI and knockoutjs) a data table where each row has an expandable item (accordion) to show a sub-table of data related to the expanded row.
I have tried to use colspan="4" on my sub-table's <td> element, to no avail. No matter what I try, the sub-table seems to only exist within the first column of the parent table. The jsfiddle below demonstrates the issue better than my description, I'm sure.
https://jsfiddle.net/xpvt214o/908333/
This may be a simple CSS issue -- I'm no expert -- but nothing I've tried works for me. I also tried wrapping the sub-table as a <div>, but that seemed to break the accordion from collapsing.
<table class="ui celled table accordion">
<thead><tr>
<th ></th>
<th >ID</th>
<th>Name</th>
<th >FK1 ID</th>
<th >FK2 ID</th>
</tr></thead>
<tbody data-bind="foreach: arrayVM">
<tr class="ui title">
<td><i class="dropdown icon"></i></td>
<td data-bind="text: id"></td>
<td data-bind="text: name"></td>
<td data-bind="text: fk1id"></td>
<td data-bind="text: fk2id"></td>
</tr>
<tr style="display:none">
<td colspan="5" class="ui content">
<table class="ui inverted celled table" style="width:700px">
<tbody>
<tr>
<td><i class="ui logo add icon"></i></td>
<td data-bind="text: id"></td>
<td>column2</td>
<td>column3</td>
<td>column4</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I have a responsive table where the end column shows money figures. Currently it looks like this:
But I want it to do this:
There may not be any data so the £ sign will be replace with N/A which should also be pulled to the right of the column.
The data is fetched from MySQL but here is a simplified snippet of my code:
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'>Budget: £123,456</div>
<div class='text-right'>Value: £200,000</div>
<div class='text-right'>Spent: N/A</div>
</td>
</tr>
</tbody>
Divs are useful but Ii don't think that be the best solution for this case maybe you need to use better the table properties
http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th colspan="2">Money</th>
</thead>
<tbody>
<tr>
<td rowspan="4">#1234</td>
<td rowspan="4">Josh Blease</td>
<td rowspan="4">Needs a new filter fixing</td>
</tr>
<tr>
<td>Budget</td>
<td>£123,456</td>
</tr>
<tr>
<td>Value</td>
<td>£200,000</td>
</tr>
<tr>
<td>Spent</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'><span>Budget:</span> £123,456</div>
<div class='text-right'><span>Value:</span> £200,000</div>
<div class='text-right'><span>Spent:</span> N/A</div>
</td>
</tr>
</tbody>
and
#mytable tbody tr td .text-right span{
min-width:200px;
max-width:300px;
display: inline-block;
}
Spans need to be set as inline-block otherwise the width properties won't take hold as they are by default inline only elements.
Setting the min and max width will force the span container to not go below or above a certain point, meaning that your other text will be forced to stay to the left of the (example) 200px mark even if your initial text (as in spent) only ends up being (again, example) 80px
I have a table that has a radio button in on td element, however i am unable to set the width (my page is in HTML5 so using the style css attribute to set the width).
My row is as follows:
<h3><span data-bind="text: description"></span></h3>
<table class="table table-striped table-condensed">
<thead>
<tr>
<th colspan="2">Description</th>
<th>Setup</th>
<th>Monthly</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: options -->
<tr>
<td style="width:16px"><input type="radio" data-bind=" attr: { name: $parent.name }, checkedValue: $data, checked: $parent.selection" /></td>
<td><span data-bind="text: description"></span></td>
<td><span data-bind="text: setup == 0 ? '-' : setup"></span></td>
<td><span data-bind="text: price == 0 ? '-' : price"></span></td>
</tr>
<!-- /ko -->
</tbody>
</table>
In fact all of the rows are 154px wide, each row is equal.
Don't worry about the data-bind attributes, i am using knockoutjs. I am using bootstrap for the stlying, but cant see any column widths applied fron the bootstrap CSS.
I have take a screenshot of chrome below:
Edit and further info
After looking at the fiddle from #daker's comment here http://jsfiddle.net/g18c/Lnvny/, i could see the width was applied OK.
When going over my code, i have a thead section which is causing the issue, this is not present in the above fiddle.
Adding the below thead section to the fiddle stops the widths from applying on the td element, updated here http://jsfiddle.net/g18c/Lnvny/2/
<thead>
<tr>
<th colspan="2">Description</th>
<th>Setup</th>
<th>Monthly</th>
</tr>
</thead>
If i set the width in the th element with <th colspan="2" style="width:20px">Description</th> it sizes, so the td elements are following the width of the td, which makes sense.
However the description spans across 2 columns with colspan="2" which consists of both the first td with radio, and second td with the text description data-bind in the tbody.
Is there any way to keep the th colspan=2 in the thead, yet set the width of the radio button td=16px in tbody?
set width for second column as auto:
http://jsfiddle.net/Lnvny/46/
<h3><span data-bind="text: description"></span></h3>
<table class="table table-striped table-condensed">
<thead>
<tr>
<th colspan="2">Description</th>
<th>Setup</th>
<th>Monthly</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: options -->
<tr>
<td style="width: 15px;"><input type="radio" data-bind=" attr: { name: $parent.name }, checkedValue: $data, checked: $parent.selection" /></td>
<td style="width: auto;">text<span data-bind="text: description"></span></td>
<td style="width: 25%;"><span data-bind="text: setup == 0 ? '-' : setup"></span></td>
<td style="width: 25%;"><span data-bind="text: price == 0 ? '-' : price"></span></td>
</tr>
<!-- /ko -->
</tbody>
</table>
16px+40%+25%+25% is not 100%.
You can't mix px and % this way, the table rendering algorithm can't satisfy such conditions...
As mali303 said, you could set the second td to auto, or even simpler: Don't set its width. The last two colums will be 25% width, the first 16px width and all the remaining space will go for the second column (and 1st td + 2nd td will be 50%)
You could also go the simpler way:
Use 3 columns (50%,25%,25%), remove th colspan, and join the content of your 2 first columns
(both are inline elements):
<td style="width: 50%;">
<input type="radio" data-bind="..." />
<span data-bind="text: description"></span>
</td>
<td style="width:1px"><div style="width:16px"><input type="radio" data-bind=" attr: { name: $parent.name }, checkedValue: $data, checked: $parent.selection" /></div></td>
Add an empty <th></th> in your <thead> section:
http://jsfiddle.net/Lnvny/48/
<table>
<thead>
<tr>
<th colspan="2">Description</th>
<th>Setup</th>
<th>Monthly</th>
<th></th>
</tr>
</thead>
All,
This xpath locator works fine in Firefox:
ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0
This does not work in IE. I have been trying to convert to CSS locator
without success. The item I am trying to select is Seller. Here's the
whole blob:
<div style="width: 168px; overflow: auto; height: 107px; padding-right: 0px;" class="dxlbd" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_D">
<input type="hidden" name="ctl00$ctl00$mainPage$rightColumn$wholeControl$grid$cell2_3$roleX$DDD$L" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_VI" value="0">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; border-collapse: separate;" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBT">
<tbody>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem dxeListBoxItemSelected" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI0T0">Choose</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI1T0">Buyer</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem dxeListBoxItemHover" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0">Seller</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI3T0">Buyer & Seller</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI4T0">Observer</td>
</tr>
</tbody>
</table>
</div>
Any ideas greatly appreciated.
Blake
There are a few ways that you could locate the seller cell. To locate it using CSS based on the content of the cell try:
css=td:contains(Seller)
If the id is static then the following should also work, however the id is unusually long, which could conceivably cause issues. I haven't tested this myself.
id=ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0