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>
Related
I have a table and I send it as html on gmail but there are white gaps in it. It's due to gmail, I suppose. There is white space between two td.
How to remove it?
My code is:
<table>
<tr class="empty"><td></td></tr>
<tr class="empty"><td></td></tr>
<tr>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Company:
</td>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Employee:
</td>
</tr>
//other code
</table>
There is default cell spacing in tables. Set cellspacing="0" in table.
<table cellspacing="0">
<tr class="empty"><td></td></tr>
<tr class="empty"><td></td></tr>
<tr>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Company:
</td>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Employee:
</td>
</tr>//other code
</table>
Here is the DEMO
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>
I have this simple code.
<div class="rating" >
<table>
<tr>
<th> Award </th>
<th> Winner </th>
<th> Runner-up </th>
</tr>
<tr>
<td> Starburst Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Rising Star Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Shooting Star Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Shining Star Award </td>
<td> #winner......................... </td>
<td> #runner-up#.....................................</td>
</tr>
</table>
</div>
table.rating, th,tr,td
{
width:100%;
border-collapse:collapse;
border:1px solid black; height:50px;
border:1px solid black;
}
Using the css I want to make better. How can I have it that it looks more like a table and not be separated like that, and have the be in the middle?
I have created a http://fiddle.jshell.net/9axbx/ , all I really want to do make the table look better.
The following code sets it up more like a table:
<div class="rating" >
<table border="1">
<tr>
<th> Award </th>
<th> Winner </th>
<th> Runner-up </th>
</tr>
<tr>
<td> Starburst Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Rising Star Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Shooting Star Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Shining Star Award </td>
<td> #winner</td>
<td> #runner-up#</td>
</tr>
</table>
</div>
<style type="text/css">
table.rating, th,tr,td
{
width: 30%;
border-collapse:collapse;
border:1px solid black;
height:50px;
border:1px solid black;
text-align: center;
}
</style>
Here's what it looks like:
I'm not quite sure what you're looking for, but that should be a good start. You really should have the <style></style> tags inside the <head></head> of your html document, but the above still works, for demonstration purposes.
EDIT: Just a note on the changes I made--
I first removed the periods after the text in the last couple of cells. Not quite sure what you put them there for. Second, I added text-align:center to your CSS. If you don't want the text centered, you can change it to, say, text-align:left to align it to the left. Third, You do not need a border, and if you don't want one just remove the border options from the CSS. Finally, I changed the width of your cells to 30%, so they all should be the same width. This makes things much neater and cleaner. 100% makes a cell the full width of the table, which I assume you don't want. If you want a cell to take up more than one column you should use the colspan attribute.
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