Is it possible to align textbox and image in same line so both of them occupy 100% of cell's width? (without setting specific width to the textbox like width:95%)
<table style="margin: 0px;float:left" border="1" width="50%" cellpadding="5" cellspacing="5">
<thead>
<tr>
<td class="title" colspan="2">
Options
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="header" style="width: 110px;">
Date
</td>
<td>
<input name="txtRelease" type="text" id="txtRelease" style="float:left;display: block;width: 100%;height: 100%;" /><input type="image" name="ImageButton1" id="ImageButton1" style="float:left;" src="http://www.classiclodges.co.uk/images/icon_date_picker.jpg" style="border-width:0px;float:right" />
</td>
</tbody>
</table>
http://www.webdevout.net/test?01O&raw
You can have your image as background on the textbox instead. Try this on your textbox css.
background: url("http://www.classiclodges.co.uk/images/icon_date_picker.jpg") no-repeat scroll right center transparent;
I used a wrapper element and absolute positioning.
Live demo: http://jsfiddle.net/62sAU/6/
Alternative layout (added some padding): http://jsfiddle.net/62sAU/7/
Do you want like this ? http://www.jsfiddle.net/Tt5gu/
For this you have to expand width of and set width in pixel.
In summary, you couldn't set width values very well. You have to calculate widths :)
Related
I am trying to make a HTML email layout using table row, where text and image is being showed in one row. But I am not able to fit in
This is what I want it to look like
My code:
<table>
<tr>
<td class="padding">
<table class="content3">
<tr>
<td>
<p style="padding: 20px; background-color: #f7f7f7;">
Learn how to sync your smartwatch or a fitness band with the Vantage Fit app here.
</p>
</td>
<td>
<img src="images/smart-devices.png" width="150px" style="background-color: #f7f7f7; display: inline;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
By setting a fixed height for each <td> element. The design could be achieved.
I have rearranged the code at codepen: https://codepen.io/samuvpd/pen/gOWbXRx
Looks like the <td> on the right adapts it's size to the width property you set to 150px. You could try setting both <td> at 100% height and then set the <tr> to the size you want.
Technically if you give the parent a size and tell the children to fill 100% of it it should behave as you wanted.
This seems to be caused by the <p> default margin, those 2 <td> are actually the same height but the background color doesn't apply to the margin so it looks smaller.
I would recommend removing that margin and making the <td> have the background color.
td {
background-color: #f7f7f7;
}
<table>
<tr>
<td class="padding">
<table class="content3">
<tr>
<td>
<p style="padding: 20px; ">
Learn how to sync your smartwatch or a fitness band with the
Vantage Fit app here.
</p>
</td>
<td>
<img
src="mages/smart-devices.png"
width="150px"
style="display: inline"
/>
</td>
</tr>
</table>
</td>
</tr>
</table>
I want to add table to my website that will not change height or width when I added a picture. The picture needed to automatic resize to td.
How can I do it?
<table style="width:100%" border="1">
<tr>
<td style="width:34%"><!--Right-->
<table border="1" style="width:100%">
<tr>
<!--Symbol--><td>
<i class="fa fa-arrow-circle-right" style="font-size:72px"></i>
</td>
<!--Name--><td style="text-align:center"><b><font style="font-size:42px">dsfdsfs</font></b><br /><font style="font-size:32px">sdfdsdsf</font></td>
<!--logo--><td>
</td>
</tr>
</table>
</td>
<td style="width:32%" rowspan="8"><!--center-->
</td>
<td style="width:34%"><!--Left-->
<table border="1" style="width:100%">
<tr>
<!--logo--><td></td>
<!--Name--><td style="text-align:center"><img src="images/company/integrity.png" /></td>
<!--Symbol--><td style="text-align:left">
<i class="fa fa-arrow-circle-left" style="font-size:72px; left:0"></i>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use max-width and max-height and set it to size of td or 100%
And I would like to suggest you NOT to write inline styles...
you using the % value to the table. So table are using current resolution i mean of the window in which you opened the page. In order to say for the table to stay in same height you need to use pixels for example:
570px; not 100% or 50% of the viewing screen.
so for the fist line i believe you can simple use the pixel value.
for example:
<table style="width:1200px" border="1">
for the image don't forget to add 100% values for example:
<td style="text-align:center" width="100%" height="100%"><img src="images/company/integrity.png" /></td>
I'm having trouble with a table's behaviour in Firefox. I want a table consisting of two columns in the ratio 3:1. The first column includes 3 images in a second table which should resize to fit into the column.
In Chrome the images resize to fit into the first column, which is correctly set to 75%. They do this whether I specify a max-width or do not give them any size attributes. However, in Firefox, the images do not resize and instead the cell expands to be greater than 75%, meaning that the contents of the second column becomes squashed.
The structure of the code looks like this:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<table cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<img src="image1.jpg" style="max-width:625px;" />
</td>
<td rowspan="2">
<img src="image2.jpg" style="max-width:240px;" />
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" style="max-width:625px;" />
</td>
</tr>
</tbody>
</table>
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
How can I adapt this code so that it works correctly in Firefox as well as in Chrome? I've read other related questions, but haven't been able to find a solution I can get to work.
P.S. Please no comments on how I shouldn't be using CSS like this. I have my reasons for not using a proper stylesheet while I'm playing around.
Unless I'm missing the boat, why don't you simply assign a relative width to the image? A value of 100% will ensure the image resizes in tandem with its parent table cell:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width:100%;" />
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
ref: http://jsfiddle.net/j26Fm/
The trick here I would say is table-layout: fixed;. It does require some additional rules but table-layout is what brings it all together.
Check out: http://codepen.io/pstenstrm/pen/kLKxz
This is worked for me, in IE, FF and Chrome.
<table style="table-layout: fixed; width: 100%; border: 0; cellspacing: 0; cellpadding: 0;">
and
<tr valign="middle">
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
I need to create a table with 2 cells (or 2 divs. Doesn't matter), which will be contained within a TD tag, like this:
<td style="height:200px;">
<table>
<tr>
<td>Top Cell</td>
</tr>
<tr>
<td>Bottom Cell</td>
</tr>
</table>
</td>
Each cell will contain 1 image (see image below). My problem however, is the image in the top cell always needs to be at the very top and the image in the bottom cell always needs to be at the very bottom, irregardless of the height of the parent TD tag. So in the example below, lets say sample #1's parent TD tag is 200px height. The images align to the very top and bottom of their cells. If I switch the height of the TD tag to 800px (Sample #2), then the images should still align properly.
alignment sample http://functionalevaluations.com/images/imagealignment.jpg
I should also mention that I can't hardcode a height into the table itself. The height of the table will always need to be 100% of the parent TD tag and the only value where I can manually adjust the height value is in the parent TD.
How can I do this? Oh, also it doesn't matter if this is a table or divs or whatever. The only thing that needs to be there is the parent TD tag.
Finally, here's my current HTML. My parent TD adjusts fine, however the height of my table is always no more than the height of my 2 images. I can't seem to get it to be the same height of the parent TD:
<td width="155" valign="top" rowspan="2" style="border:solid 1px #000;height:200px; ">
<table border="1" cellspacing="0" cellpadding="0" style="height: 100%;">
<tr>
<td valign="top" style="height:50%;">
<img src='includes/images/itemImages/TopImage.jpg' border="0"
style="vertical-align: top">
</td>
</tr>
<tr>
<td valign="bottom" style="height:50%;">
<img src='includes/images/itemImages/bottomImage.jpg' border="0" style="vertical-align: bottom">
</td>
</tr>
</table>
</td>
Try this - DEMO
HTML
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="top">
<img src='http://lorempixel.com/100/100' />
</td>
</tr>
<tr>
<td class="bottom">
<img src='http://lorempixel.com/100/100' />
</td>
</tr>
</table>
CSS
img {
display: block;
margin: auto;
}
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
A legacy website that I am working on has a popup box that uses an iFrame and has nested tables. Within the cells of this table there is simple text and the last row of the table has two input boxes; one left aligned and one right aligned.
On screen resolution higher than 1024 X 768 everything is displayed within the borders of the box. The problem lies when I have resolution of 1024 X 768 or lower the text expands wider then the box and therefore horizontal scroll bars are turned on. I like to modify the inline css styling that so prominent in this design so the text and buttons render the same in any resolution and no scroll bars are turned on.
The only thing I can see is that table width is set to 100%.
Any help will be a life saver.
Thanks
Please find screenshots attached:
> 1024 x 768 sample
1024 X 768
Here is the markup for the tables
<div align="center" style="padding: 8px 10px 4px;">
<table cellspacing="0" cellpadding="0" align="center" width="600px">
<tbody><tr>
<td align="center" valign="top">
<div class="container">
<TABLE cellSpacing="5" cellPadding="5" width="100%" class="gradientHeader">
<tr>
<th width="100%">
xxxxxx
</th>
</tr>
<tr>
<td width="100%">
some text
</td>
</tr>
<tr>
<td width="100%" style="PADDING-LEFT: 10px">
<table width="100%">
<tr>
<td width="100%">
<FIELDSET style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none;padding:0;">
<asp:RadioButtonList id="rbl" runat="server" />
</FIELDSET>
</td>
</tr>
<tr>
<td align="left">
<AN IMAGE BUTTON>
</td>
<td align="right">
<AN IMAGE BUTTON>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="hidProductId" id="hidProductId">
</td>
</tr>
</table>
</div>
</td></tr></tbody></table>
the table code you have given, will only scroll once a width less than 600px is reached because of the very first fixed width table
there is an error in colspans the cell with the fieldset in it should be colspan="2" and there is too much width="100%" there would be no need to put it every cell once the table is set to 100%.. however even with those there's nothing here that would force a scrollbar until <600px
I think the problem must be the width of the popup div and/or iframe instead