I have a table with a cell with 2 items (input text and image). I try to align them vertically but it does not work.
I try use vertical-align:middle, margin top, padding, try set height:100%, etc...
The code is simply:
<table cellspacing="0" rules="all" border="1" id="Origen" style="width:100%;border-collapse:collapse;">
<tr>
<td class="cabeceraDG"> Origen</td><td class="cabeceraDG"> Centro</td><td class="cabeceraDG"> Usuario</td>
</tr><tr style="white-space:nowrap;">
<td class="campoOpcional">oficina</td><td class="campoOpcional" align="center" style="width:150px;">
<input name="Origen$ctl02$referenciaTextBox" type="text" value="0000" id="Origen_ctl02_referenciaTextBox" class="campoOpcional" onblur="return validate(this)" ref="0991" />
<input type="image" name="Origen$ctl02$imgBtnGuardarCentro" id="Origen_ctl02_imgBtnGuardarCentro" title="Guardar" AutoPostBack="false" src="https://s30.postimg.org/usmf6nsn5/boton_Abonar.gif" onclick="return ASPxClientEdit.ValidateGroup(); msGuardar();" style="border-width:0px;" />
</td><td class="campoOpcional">TEST</td>
</tr>
</table>
And here an example with the problem: https://jsfiddle.net/javierif/nmpmj1eh/
Add vertical-align: middle to .campoOpcional input and it works - see demo below:
.campoOpcional input {
vertical-align: middle;
}
<table cellspacing="0" rules="all" border="1" id="Origen" style="width:100%;border-collapse:collapse;">
<tr>
<td class="cabeceraDG">Origen</td>
<td class="cabeceraDG">Centro</td>
<td class="cabeceraDG">Usuario</td>
</tr>
<tr style="white-space:nowrap;">
<td class="campoOpcional">oficina</td>
<td class="campoOpcional" align="center" style="width:150px;">
<input name="Origen$ctl02$referenciaTextBox" type="text" value="0000" id="Origen_ctl02_referenciaTextBox" class="campoOpcional" onblur="return validate(this)" ref="0991" />
<input type="image" name="Origen$ctl02$imgBtnGuardarCentro" id="Origen_ctl02_imgBtnGuardarCentro" title="Guardar" AutoPostBack="false" src="https://s30.postimg.org/usmf6nsn5/boton_Abonar.gif" onclick="return ASPxClientEdit.ValidateGroup(); msGuardar();"
style="border-width:0px;" />
</td>
<td class="campoOpcional">TEST</td>
</tr>
</table>
Use this code,
input inside the campoOpcional needed vertical-align
.campoOpcional input {
vertical-align: middle;
}
Related
Current display
Im working on a asp.net site for work and I need to have inputs both text and checkboxes. My current solution is as follows:
<form method="post" style="width:100%">
<table style="padding:5px; width:100%">
<tr>
<td style="white-space:nowrap; width:1%">Printer name:</td>
<td><input type="text" name="PrinterName" value="#Request["PrinterName"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">Model:</td>
<td><input type="text" name="Model" value="#Request["Model"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">Location:</td>
<td><input type="text" name="Location" value="#Request[" Location"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">IP:</td>
<td>
<table style="margin:0px; padding:0px">
<tr>
<td style="padding:0px"><input type="text" name="IP" value="#Request["IP"]" style="max-width:100%; width:100%" /></td>
<td style="white-space:nowrap;width:1%">
<div><input style="margin:0px; padding:0px" type="checkbox" />QuickIP</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="white-space:nowrap">MAC(XX-XX-XX-XX-XX-XX):</td>
<td><input type="text" name="MAC" value="#Request["MAC"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" class="Sumbit" style="max-width:100%; width:100%" /></td>
</tr>
</table>
</form>
The checkbox is not reporting the correct size(IE and Chrome) and the text is not being kept inside of the space either.
The aim is to have the text directly beside the checkbox, and both fo those being in line as small as possible to the right of the text input. How would i achieve that without this strange bug ?
Edit: in my testing i had switched the textbox and the button as wel las added a height in the style of the checkbox, those have been corrected now
Edit2: Added in a picture of what shows up right now
It seems you just need to remove height: 1% from
<td style="white-space:nowrap;width:1%">
<!-- remove the height from the style below -->
<div><input style="margin:0px; padding:0px; height:1%" type="checkbox" />QuickIP</div>
</td>
This will render the checkbox next to the "QuickIP" text
Take a look at this codepen.
I have a HTML table in which a background color is set on each cell. As a result, the contrast between two bg colors appears as a border. Please refer to accepted solution at
Borders around every cell and table
This is a follow up question.
Now I need to include bootstrap in my application. However, as soon as I include bootstrap CSS the border appearance disappears (even if I don't include any bootstrap class). How can I include bootstrap and still have a border like appearance around each cell.
Here is the fiddle with bootstrap included
https://jsfiddle.net/hqkw4x1s/1/
and below is the original code, without reference to bootstrap css (this gives a border like appearance due to bgcolors)
.lab {
HEIGHT: 18px; FONT-WEIGHT: normal; TEXT-ALIGN: left; PADDING-LEFT: 4px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: #e6f6f6
}
.val {
PADDING-BOTTOM: 1px; PADDING-TOP: 1px; PADDING-LEFT: 2px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: white
}
<FORM>
<DIV>
<TABLE width="100%" bgColor=#cecece border=0 cellSpacing=1 cellPadding=0>
<TBODY>
<TR vAlign=middle>
<TD width="6%" class=lab>Country</TD>
<TD width="44%" class=val>
<INPUT name="A" id="A" type=checkbox CHECKED>
<LABEL for="A">A</LABEL>
<INPUT name="B" id="B" type=checkbox CHECKED>
<LABEL for="B">B</LABEL>
</TD>
<TD width="6%" class=lab>States</TD>
<TD width="44%" class=val>
<TABLE width="100%" border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD>
<SELECT>
<OPTION value="p" selected>P</OPTION>
<OPTION value="q">Q</OPTION>
<OPTION value="r">R</OPTION>
</SELECT>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR vAlign=middle>
<TD class=lab>Ownership</TD>
<TD class=val>
<TABLE width="100%" border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD><TEXTAREA style="WIDTH: 95%" rows=1 cols=20></TEXTAREA></TD>
<TD style="WIDTH: 75px; TEXT-ALIGN: left"><SPAN
style="BACKGROUND-COLOR: #f8f8f8"></SPAN>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD class=lab>Partnership</TD>
<TD class=val><INPUT type=text xHeight="32px"> </TD>
</TR>
<TR vAlign=middle>
<TD class=lab>Accounts Payable</TD>
<TD
style="PADDING-LEFT: 2px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: white">
<INPUT type=text>
</TD>
<TD class=lab>Start Date</TD>
<TD class=val>
<INPUT type=text xHeight="32px">
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</FORM>
Please update below table tag.Here you just need to use the bootstrap standard class to achieve this.
Instead
<table width="100%" bgcolor="#cecece" border="0" cellspacing="1" cellpadding="0">
Should be:
<table class="table table-bordered" width="100%" bgcolor="#cecece" border="0" cellspacing="1" cellpadding="0">
I have this html (fiddle):
<table>
<tr>
<td colspan="1" style="vertical-align:top"> <span class="" title="">Add new Comment:</span>
</td>
<td colspan="1" style="height:80px;vertical-align:top;">
text
<textarea id="" class="" style="height:52px;vetical-align:top;"></textarea>
Person:
<input id="" class="" type="text" value="" style="vetical-align:top;"/>
<button class="" style="width:90px;vetical-align:top;" onclick="">Insert</button>
</td>
</tr>
</table>
The problem is that i cant display the contents of second td vertically aligned top.
I saw also other answers that use the property display: table-cell; but doesn't seem to work.
Any ideas on how to do this?
You have a typo is vertical-align not vetical-align:top(also please avoid using inline styles):
<table>
<tr>
<td colspan="1" style="vertical-align:top"> <span class="" title="">Add new Comment:</span>
</td>
<td colspan="1" style="height:80px;vertical-align:top;">
text
<textarea id="" class="" style="height:52px;vertical-align:top;"></textarea>
Person:
<input id="" class="" type="text" value="" style="vertical-align:top;" />
<button class="" style="width:90px;vertical-align:top;" onclick="">Insert</button>
</td>
</tr>
</table>
<table>
<tr>
<td colspan="1" style="vertical-align: top"><span class="" title="">Add new Comment:</span>
</td>
<td colspan="1" style="height: 80px; vertical-align: top;">
<div>text</div>
<div>
<textarea id="" class="" style="height: 52px; vetical-align: top;"></textarea></div>
<div>Person:</div>
<div>
<input id="Text1" class="" type="text" value="" style="vetical-align: top;" /></div>
<div>
<button class="" style="width: 90px; vetical-align: top;" onclick="">Insert</button></div>
</td>
</tr>
</table>
used html divs around contents,have a look at updated link please,hope it helps
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td colspan="1" valign="top"> <span class="" title="">Add new Comment:</span>
</td>
<td colspan="1" valign="top">
<table cellpadding="0" cellspacing="5" border="0">
<tr valign="top">
<td>Text:</td>
<td><textarea id="" class="" style="height:52px;vetical-align:top;"></textarea></td>
<td>Person:</td>
<td><input id="" class="" type="text" value="" style="vetical-align:top;"/></td>
<td><button class="" style="width:90px;vetical-align:top;" onclick="">Insert</button></td>
</tr>
</table>
</td>
</tr>
</table>
In the image above First Name and Textfield are not aligned from the left. I don't know whether its border or padding. But the image inside is conditionally visible. How to get rid of it just by html and css.
<div id=first_name>
First Name<br />
<table>
<tr>
<td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' /></td>
<td><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" /></td>
</tr>
<tr>
<td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span></td>
</tr>
</table>
</div><!-- eof first_name -->
The problem was that even though you have the image hidden, there is still a <td> element, I made a few changes to the code, I put the First Name into a <td> to align with your input. Also wrapped it in a label. I removed the td the image was in, you could either put it in the same cell as the input, or dynamically add it with javascript and take it out completely (this would be my approach).
<div id=first_name>
<table>
<tr>
<td>
<label for='form_first_name'>First Name:</label>
</td>
</tr>
<tr>
<td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none;' /><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
</tr>
<tr>
<td><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span></td>
</tr>
</table>
</div><!-- eof first_name -->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<img src='images/form_error.png' class="error_image"
id="form_first_name_err_img" style='display: none' />
</td>
<td>
<input align="middle" id="form_first_name" class="form_field1"
type="text" name="first_name" />
</td>
</tr>
<tr>
<td colspan="2">
<span class="error_msg" id="form_first_name_err_msg"
style='display: none'>This cannot be left blank.
</span>
</td>
</tr>
</table>
try this
Set border to 0 in table tag as shown below
<table border="0">
HTML
<div id="first_name">First Name</div>
<table class="tables" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
</td>
<td>
<input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
</tr>
<tr>
<td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span>
</td>
</tr>
</table>
Demo
OR
HTML
<div id="first_name">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>First Name:
</td>
</tr>
<tr>
<td>
<input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
<td>
<img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
</td>
</tr>
<tr>
<td colspan="2"> <span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank. </span>
</td>
</tr>
</table>
</div>
Demo
While putting the archaic: <table cellspacing="0" cellpadding="0"> would still produce good enough results in most (backward compatible) browsers, attributes cellpadding and cellspacing are not supported in HTML5 and shouldn't be used.
Rather put something like this in your stylesheet:
#first_name table {
border-collapse: collapse;
border-spacing: 0;
}
#first_name td {
padding: 0;
}
#first_name input {
margin: 0;
}
Of course, you can add classes to your elements and update the stylesheet accordingly.
TIP: For future similar problems, try using dev tools in your browser of choice and investigate what default style is being applied to the elements, so you can adjust accordingly.
I create the table like this.
<table border="1">
<tr>
<td width="250px" rowspan="2"><input type="image" src="dash.jpg" name="image" style=width:50% height="100"> </td>
<td width="1100px" align="center" valign ="top"><div id="head1" style="font-size: 55px;letter-spacing:3px">Sample programming html</div></td>
<td width="300px" align="center" valign ="top"><span id="subhead1" style="font-size: 25px;letter-spacing:3px">Chap: <label id = "l1" style = "color:white;font:normal 22px chalkdust;">1</label></span><br>
<span id="subhead2" style="font-size: 30px;letter-spacing:3px"> <input type="text" id="text2" disabled="disabled" value="0" style= "color: #fff; font-size: 18pt;"/> - POINT</span>
</td>
</tr>
<tr>
<td colspan="3" align="center" style="position: relative;" valign ="top">
<div id="head2" style="font-size: 25px;letter-spacing:4px">1-COORDINATE GRID</div></td>
</tr>
<tr><td colspan="3" align="center"><hr id="line" color="#fff" size="2" width="75%"></td></tr>
</table>
I want the content "Sample programming html" in center and the "1-COORDINATE GRID" is exactly center to that of the content. I use various code but it not allign exactly to the center of the "Sample programming html". Can anybody help this to fix the problem.
your td cells are differnt width ,if you want adjust the text alignment yourself you might use
left or right padding css property.
<div id="head2" style="padding-left:250px..../>
Just remove the colspan="3" from the row and it get alligned.
<tr>
<td align="center" style="position: relative;" valign ="top">
<div id="head2" style="font-size: 25px;letter-spacing:4px">1-COORDINATE GRID</div></td>
</tr>