I have been agonizing over this, the alignment of my third table row is complete messed when viewed either Firefox or Chrome but look exactly as expected in IE9.
I have tried using style (text-align, width, margin-left, overflow, etc...) and direct align, width. etc.... When creating the width, I have tried using % and direct pixel values.
The parent table has a width 400px, or at least is should because that is the width of the parent TD and table width is 100% and cellpadding and cellspacing is 0.
<table align="center" style="width: 650px; border-style: none" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 250px;"><img src="../images/incidentmonitor.gif" alt="" /></td>
<td style="text-align: center; width: 400px">
<!-- Login section Table -->
<table align="center" style="width: 100%; border-style: none;" class="clsLoginTable" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: right; width: 25%; overflow: hidden;"> </td>
<td style="text-align: right; width: 5%; overflow: hidden;"> </td>
<td style="text-align: left; width: 70%; overflow: hidden;"> </td>
</tr>
<tr>
<td colspan="3" class="clsLoginLabel" style="text-align:center;">
<p><b>Please enter your User ID and Password</b><br /><br /></p>
</td>
</tr>
<tr>
<td style="text-align: right;" class="clsLoginLabel">User ID:</td>
<td style="text-align: right;"> </td>
<td style="text-align: left;"><input name="UserID" value="administrator" size="20" /></td>
</tr>
<tr>
<td style="text-align: right;" class="clsLoginLabel">Password:</td>
<td style="text-align: right;"> </td>
<td style="text-align: left;"><input autocomplete="off" type="password" name="Password" onkeydown="SendForm(event.keyCode)" size="20" /></td>
</tr>
<tr style="display: block;">
<td align="right" width="25%" class="clsLoginLabel">Domain:</td>
<td align="right" width="5%"> </td>
<td align="left" width="70%">
<select id="DomainName" name="DomainName" size="1" style="width: 200px">
<option selected="selected" value='' >Built-In</option>
<option value='dnsdev.com' >dnsdev.com</option>
<option value='dnsdev.org' >dnsdev.org</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<button id="submit_request" name="submit_request" class="clsButton" accesskey="L" onclick="Validate();return false" Title="Login to IncidentMonitor "><u>L</u>ogin</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
I have a HTML table whose data is coming from the database. Currently the data is getting filled from the center instead of top. Like below:-
Have a look at the below HTML
<table style="width: 100%; height: 550px; text-align: center" border="1" runat="server"
id="tbl1Details">
<colgroup>
<col width="5%" />
<col width="45%" />
</colgroup>
<tr>
<td colspan="4">
<asp:Label ID="lblpltfrm_Number" runat="server" Style="height: 20px;"></asp:Label>
</td>
</tr>
<tr>
<td align="center" style="height: 20px;">
SR.
</td>
<td align="center" style="height: 20px;">
Stop
</td>
<td align="center" style="height: 20px;">
Time
</td>
<td align="center" style="height: 20px;">
Status
</td>
</tr>
<tr>
<td id="tTime" runat="server">
<div id="list" runat="server" style="font-size: 25px;">
</div>
</td>
<td>
<table style="width: 100%">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tr>
<td style="text-align: left">
<div id="dv_FromStop" style="font-size: 25px;" runat="server">
</div>
</td>
<td style="text-align: left">
<div id="Dv_ToStop" style="font-size: 25px;" runat="server">
</div>
</td>
</tr>
</table>
</td>
<td>
<div id="dv_Time" style="font-size: 25px;" runat="server">
</div>
</td>
<td>
<div id="dv_status" style="font-size: 25px;" runat="server">
</div>
</td>
</tr>
</table>
Use the following CSS:
table td {
vertical-align: top;
}
Or in HTML, use either:
<td valign="top">
<td style="vertical-align: top;">
The second one is preferred because, valign is deprecated.
You need to use vertical alignment.
css:
td { vertical-align:top; }
Use vertical-align: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
In CSS:
td { vertical-align: top; }
In HTML:
<td valign="top">...</td>
I'm trying to design a form looking like that:
I tried with a table embedding another two tables, one with 5 rows and the other with 6 rows, and tried to arrange it with CSS, but somehow it doesn't seem to work out. I'm looking for a solution to correct my design or for completely another (with div's?). Here my code:
<td style="display: table-cell; text-align: right; height: 80%;">
<table style="display: table-cell; text-align: right; height: 80%;">
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier1"
labelfor="inputPalier1" />
</td>
<td width="180" >
<tech:text property="inputPalier1"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier2"
labelfor="inputPalier2" />
</td>
<td width="180" >
<tech:text property="inputPalier2"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier3"
labelfor="inputPalier3" />
</td>
<td width="180" >
<tech:text property="inputPalier3"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier4"
labelfor="inputPalier4" />
</td>
<td width="180" >
<tech:text property="inputPalier4"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier5"
labelfor="inputPalier5" />
</td>
<td width="180" >
<tech:text property="inputPalier5"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
</table>
</td>
<td style="text-align: left;">
<table style="text-align: left;">
<tr>
<td><div style="background-color: #CDFFAA; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #FFFF99; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #FFDC77; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #FFBA44; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #F07300; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #A00000; height: 100%;"> </div></td>
</tr>
</table>
</td>
I tried some different variations, using various display css attributes on my first table, height css attributes on the cells, and so on, to no avail. Any idea?
I hope this is what you are looking for https://jsfiddle.net/sua15zok/3/ . Please specify if any corrections in css required. I will do it and update the required UI.
I want to align the second <table> in the <div>. The table should start from the second column of the first table. Right now, the second table with the text “1111111111111” starts from the extreme left but I wish to align it to where the textboxes start in the first table.
Here is my HTML:
<div style="float: left; height: 250px;overflow:auto; display:block;margin-left: 10px">
<table border="1">
<tr>
<td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">First Name</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">Email</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 45px;"></td>
<td style="text-align: center"></td>
</tr>
</table>
<table border="1">
<tr>
<td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111</td>
</tr>
</table>
</div>
Set the margin-left value to 33% for the 2nd table using :nth-child(2)
table:nth-child(2) {
margin-left: 33%;
}
<div style="float: left; height: 250px;overflow:auto; display:block;margin-left: 10px">
<table border="1">
<tr>
<td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">First Name</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">Email</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 45px;"></td>
<td style="text-align: center"></td>
</tr>
</table>
<table border="1">
<tr>
<td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111</td>
</tr>
</table>
</div>
div {
display: table; /* Display the div as a table */
}
div > table {
display: contents; /* Ignore the tables and display their contents
as if they were contents of the div */
}
div > table:last-child tr:before {
content: ''; /* Insert a pseudo-element at the beginning */
display: table-cell; /* Display it as a cell */
}
div {
display: table;
}
div > table {
display: contents;
}
div > table:last-child tr:before {
content: '';
display: table-cell;
}
<div>
<table border="1">
<caption>Title</caption>
<tr>
<td>First Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" /></td>
</tr>
</table>
<table border="1">
<tr>
<td>1111111111111</td>
</tr>
</table>
</div>
Note display: contents is not widely supported yet.
You can have a look at this code. Let me know if its working with you.
http://jsfiddle.net/FnK9D/13/
<div style="position:absolute;">
<table border="1" style="">
<tr>
<td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">First Name</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">Email</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 45px;"></td>
<td style="text-align: center"></td>
</tr>
</table>
<table border="1" style="float:right;">
<tr>
<td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111111</td>
</tr>
</table>
</div>
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>
Here is my code:
<form id="form1" style="height: 800px; width:1000px" >
<table style="width: 90%; height: 193;">
<tr>
<td class="style4">
<table style="width: 100%; height: 701px;">
<tr>
<td style="height: 587px; width: 629px;" colspan="4" >
<div id="tableTree" style="height:600px;">
<table style="width: 150px;">
<div id="treeboxbox_tree" style="width:280px; height:100%; ">
</div>
</table>
</div>
</td>
</tr>
<tr>
<td >
<input type="button" value="Add" id="btnAdd" onclick="return someMethod()" />
</td>
<td >
//other button
</td>
<td >
//other button
</td>
</tr>
</table>
</td>
<div>
<td>
<table width="100%" id="smth">
<div style="float:left"><%Html.RenderPartial("Something"); %></div>
</table>
</td>
</div>
</tr>
</table>
</form>
And smth is not shown until I click on a button. But since smth has very large height, the td which has style4 goes down, where the middle of smth is. It is very frustrating. How to resolve it?
I think you mean the vertical alignment is off in the td?
<td class="style4">
Change it to
<td class="style4" valign="top">
Or add to style4
vertical-align: top;
Not sure which version of html you are defining...