<table>
<tr>
<td style="text-align:right">
<div style="float:right;">
<span class="style5 style6">
<span class="style8">
Forget Password?
</span>
</span>
</div>
</td>
</tr>
</table>
how to align the link forgetpassword at right corner top of the page
Your table width is not wide enough to set the link on the right side. Set the table width to 100% and your code will work.
<table width="100%">
<tr>
<td style="text-align:right;">
<div style="float:right;">
<span class="style5 style6">
<span class="style8">
Forget Password?
</span>
</span>
</div>
</td>
</tr>
</table>
Related
In my project, I have four pictures.
Theses pictures can be displayed one by one when page is loading successfully.
Now I am in trouble for these four picture's size is not the same because these pictures have different original size
I have tried to define height of each tr, but it works fail.
Here is my html code:
<table style="width:100%;height:100%;position:absolute;top:0;right:0;font-size:20px;">
<tr style="height:80px">
<td>
<div style="float:left">
<span>
CompanyNetworkStruct
</span>
</div>
<div style="float:left">
<img src="pic/nsccnetwork.jpg">
</div>
</td>
</tr>
<tr style="height:80px">
<td>
<div style="float:left">
<span>
GovenmentCloudStruct
</span>
</div>
<div style="float:left">
<img src="pic/govCloud.jpg">
</div>
</td>
</tr>
<tr style="height:80px">
<td>
<div style="float:left">
<span>
PublicCloudStruct
</span>
</div>
<div style="float:left">
<img src="pic/publicCloud.jpg">
</div>
</td>
</tr>
<tr style="height:80px">
<td>
<div style="float:left">
<span>
ScienctBNetWorkStruct
</span>
</div>
<div style="float:left">
<img src="pic/officeBS.jpg">
</div>
</td>
</tr>
</table>
I want to define each picture size is width:400px height:400px, who can help me ?
Simply set the width and height on img in your CSS:
img {
width: 400px;
height: 400px;
}
<table style="width:100%;height:100%;position:absolute;top:0;right:0;font-size:20px;">
<tr style="height:80px">
<td>
<div style="float:left">
<span>
CompanyNetworkStruct
</span>
</div>
<div style="float:left">
<img src="http://placehold.it/100">
</div>
</td>
</tr>
<tr style="height:80px">
<td>
<div style="float:left">
<span>
GovenmentCloudStruct
</span>
</div>
<div style="float:left">
<img src="http://placehold.it/100">
</div>
</td>
</tr>
<tr style="height:80px">
<td>
<div style="float:left">
<span>
PublicCloudStruct
</span>
</div>
<div style="float:left">
<img src="http://placehold.it/100">
</div>
</td>
</tr>
<tr style="height:80px">
<td>
<div style="float:left">
<span>
ScienctBNetWorkStruct
</span>
</div>
<div style="float:left">
<img src="http://placehold.it/100">
</div>
</td>
</tr>
</table>
try adding max-height, max-width
<tr style="height:80px">
<td>
<div style="float:left">
<span>
GovenmentCloudStruct
</span>
</div>
<div style="float:left">
<img style="max-height:400px;max-width:400px;" src="pic/govCloud.jpg" >
</div>
</td>
</tr>
First, add in style img {width: 400px; height: 400px;} then set same height and width into img tag, like:
<img src="pic/officeBS.jpg" width="400" height="400" style="width: 400px; height: 400px;">
Hope, this will help you.
I want to display an image in a table in the center of a cell, but this is what i get. My image covers the complete cell rather than being placed in the center of the cell . I am using an img-responsive class for image and table-responsive for table both from the bootstrap file.
Further, whenever I load the page, i get one of the following outputs randomly with absolutely no change in the code.
Why does this happen??
In both the cases image, image will be seemed to be positioned to the left side of the column, how do I correct it so that image is positioned in the center.
Following is the code
<div class="table-responsive inside_content ps-container" style="margin-bottom: 50px">
<style>
th,td{
text-align: center;
}
</style>
<table id="event" class="table table-striped table-responsive">
<thead>
<tr>
<th>Serial No.</th>
<th>Section</th>
<th>TimeStamp</th>
<th>Archive_Status</th>
<th>Event Picture</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
test1 </td>
<td>
Event3 </td>
<td>
2015-01-08 19:41:45 </td>
<td>
0 </td>
<td>
<a class="event_group1" href="http://localhost/IOCLALL/IOCLbackend/../IOCLfrontend/images/events/WWW.YTS_.RE_.jpg">
<img alt="No Image" class="img-responsive" style="max-width:145;max-height: 208px" src="http://localhost/IOCLALL/IOCLbackend/../IOCLfrontend/images/events/WWW.YTS_.RE_.jpg" />
</a>
</td>
<td>
<span class="fa fa-fw fa-trash" ></span>
<span class="fa fa-fw fa-edit" ></span>
</td>
</tr>
</tbody>
</table>
</div>
You must treat the TD like you would treat a P,
add a text-align:center to the TD and a display:inline-block to the image
<td style="text-align: center;">
<img style="display: inline-block;" />
</td>
<td style="text-align: center;">
add css to that td to align text in the center, it should apply for the image as well
Add align="center" to the cell .
Eg.
<td align="center">
<img src="...
how about adding
display:inline / inline-block;
margin:0px auto;
I hope it will answer your question
I have a simple page as below which is used to specify a file by the user. Each row in the table has three 'td's. The first tdis a label, and last td is a button. The middle td is used to display the full path of the given file. And the middle td is expected to fill the remaining space and it should wrap its content if the file name is too long.
<table style="width:100%;">
<tr style="width:100%;">
<td style="width:auto;background:red;white-space:nowrap;">
<span>License File</span>
</td>
<td style="width:100%;background:blue;white-space:normal">
<div style="display:block;">
<span class="file_name"></span>
</div>
</td>
<td style="width:auto;background:gray;white-space:nowrap;">
<input type="button" value="Install License File" />
</td>
</tr>
<tr style="width:100%;">
<td style="width:auto;background:red;white-space:nowrap;">
<span>Control File</span>
</td>
<td style="width:100%;background:blue;white-space:normal">
<div style="display:block;">
<span class="file_name"></span>
</div>
</td>
<td style="width:auto;background:gray;white-space:nowrap;">
<input type="button" value="Install Control File" />
</td>
</tr>
</table>
I'm having trouble aligning an image with text. The problem only occurs in outlook 03,07 & 10. See this picture to get a better understanding of my problem:
This is my code:
<td valign="middle" style="color:#fff; font-size:18px; padding-left:3%;" width="600" height="34" bgcolor="#1a292f">
<span class="nonmobile_content">
Onsdag
</span>
<span style="font-weight: bold">
21.03
</span>
<span style="color:#87bcd8;">
2013
</span>
<span style="color:#87bcd8;">
uke 11
</span>
<span>
<img src="retriever-logo-top.png" align="right">
</span>
</td>
<td bgcolor="#1a292f">
</td>
Is there a reason you're putting this all in one table cell rather than putting the image in a separate cell? You could simply:
<tr>
<td colspan="2">
Retriever (1), Cision (2), ...
</td>
</tr>
<tr>
<td ... >
<span class="nonmobile_content">
Onsdag
</span>
<span style="font-weight: bold">
21.03
</span>
<span style="color:#87bcd8;">
2013
</span>
<span style="color:#87bcd8;">
uke 11
</span>
</td>
<td>
<img src="retriever-logo-top.png" align="right">
</td>
</tr>
Then rather adding width to each individual td simply add it to the table:
<table width="600">
What we know is the width total of the table and the first column. The 3 and 4 column must adapt to the content, and the second column must use the rest of space. This second column must set the overflow hidden, allowing only one line or a line line
Maybe the fiddle is more clear
http://jsfiddle.net/favio41/9z867/
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
</colgroup>
<tbody>
<tr>
<td class="date">
<span class="month monthAndYear">Feb</span>
<br/>
<span class="day ng-binding">21</span>
</td>
<td style="background-image: url(resources/img/categories/G0400.png);" class="category_icon cat_G0400">
<span class="concepto ng-binding">This is a example of text</span>
</td>
<td>
<span data-tooltip="Internet, teléfono fijo" class="cat-label cat-tooltip onlyTitle">
<span class="text ng-binding">Internet</span>
<span class="arrow"></span>
</span>
</td>
<td class="importe">
<span class="importe_value ng-binding">-33,23</span>
</td>
</tr>
<tr>
<td class="date">
<span class="month monthAndYear">Feb</span>
<br />
<span class="day ng-binding">21</span>
</td>
<td style="background-image: url(resources/img/categories/G0400.png);" class="category_icon cat_G0400">
<span class="concepto ng-binding">This is a example of text, but this is really big and we want to be hidden the last part because if is too big ...</span>
<br/>
<span class="descripcion ng-binding">This is a example of description text</span>
</td>
<td>
<span data-tooltip="Internet, teléfono fijo" class="cat-label cat-tooltip onlyTitle">
<span class="text ng-binding">Internet</span>
<span class="arrow"></span>
</span>
</td>
<td class="importe">
<span class="importe_value ng-binding">-33,23</span>
</td>
</tr>
</tbody>
Put a DIV in the cell you want to have overflow. Set the dimensions and overflow for the DIV, not the TD.