I'm trying to center the content in my body tag in a simple HTML page. I want the body to be 100% width, i have a container div inside of it with a set width, i want the container to be in the center of the screen.
I tried to set the margin to 0 auto; does not work, tried to set align="center" in the body tag, doesnt work.
Here is my page, as you can see it's not in center: http://jsbin.com/vifekivatabo/1/
What am i doing wrong?
Hey you forget to this
Define
your .container1 margin:0 auto;
.container1{
margin:0 auto;
}
Try thhis to your container class:
.container
{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.container1 {
max-width: 600px;
width: auto;
margin:0 auto;
text-align:center;
}
ADD
margin:0 auto;//to center the page
text-align:center;
Fiddle
http://jsfiddle.net/7c9wjLy6/1/
No problem with margin:0 auto;
here
.container1{
margin:0 auto;
}
Just put<center> before starting the div and </center> after closing the div.
Like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
body {
width: 100%;
font-family: Arial, Verdana;
margin: 0 auto !important;
padding: 0;
}
.container1 {
max-width: 600px;
width: auto;
}
.inner {
max-width: 60%;
width: auto;
margin: 0 auto;
}
.round {
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
margin: 0 auto 0 auto;
padding: 5px;
border: 2px solid #f4f3ee;
background: #ffffff;
}
.auto-style1 {
font-size: xx-small;
}
</style>
</head>
<body>
<center>
<div class="container1">
<img alt="l" src="~/xxx.png" />
<div id="acceptMsg" class="inner">
<b>Welcome to the xxx mobility enrollment page.</b>
<br />
<p>dasdasd</p>
<br />
<br />
<div>
#* <select name="DL_MarketChooser" id="DL_MarketChooser" style="width:40%;">
<option selected="selected" value="Choose Region">Choose Region</option>
<option value="https://connect.molnlycke.com/ssp/hq">Temporary Enrollment</option>
</select>*#
<table id="loginTable" align="center" class="registration" border="0" cellpadding="0" cellspacing="6">
<colgroup>
<col>
</colgroup>
<tbody>
<tr class="middleRow">
<td class="firstColumn">Username:</td>
<td class="secondColumn">
<input type="text" id="userID" size="11" value="">
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn">Password:</td>
<td class="secondColumn">
<input type="password" id="Password" size="11" value="">
</td>
</tr>
<tr class="lastRow">
<td colspan="2">
<div class="registerButtons" align="center">
<button type="button" onclick="performAuth()" tabindex="0">Login</button>
</td>
</tr>
</tbody>
</table>
<table id="registerTable" align="center" class="registration" border="0" cellpadding="0" cellspacing="6">
<colgroup>
<col>
</colgroup>
<tbody>
<tr class="firstRow">
<td class="firstColumn"></td>
<td class="secondColumn"><span class="gwt-CheckBox">
<input type="checkbox" id="isPDA" tabindex="0"><label for="gwt-uid-1">My device has no phone number</label></span></td>
</tr>
<tr class="middleRow">
<td class="firstColumn">Country:</td>
<td class="secondColumn">
<select tabindex="0" id="countrySelect">
<option value="+46">Sweden</option>
<option value="+83">United States</option>
</select>
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn"></td>
<td class="secondColumn">
<table>
<colgroup>
<col>
</colgroup>
<tbody>
<tr>
<td class="inline-label">Country<br>
Code</td>
<td class="inline-label">Prefix and Number<br>
(no space, no leading zero)</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn">Mobile:</td>
<td class="mobile-cell secondColumn">
<table>
<colgroup>
<col>
</colgroup>
<tbody>
<tr>
<td>
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: middle;">
<input type="text" tabindex="0" id="countryCode" size="1" disabled="" value="+46"></td>
<td align="left" style="vertical-align: top;">
<div class="errorMessage" style="display: none;">Required field</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: middle;">
<input type="text" tabindex="0" id="phoneNumber" size="11"></td>
<td align="left" style="vertical-align: top;">
<div class="errorMessage" style="display: none;">Required field</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn">Platform:</td>
<td class="secondColumn">
<select tabindex="0" id="platformSelect">
<option value="no">-Select-</option>
<option value="A">Android</option>
<option value="I">iOS</option>
<option value="W">Windows Phone</option>
</select>
</td>
</tr>
<tr class="middleRow">
<td class="firstColumn"></td>
<td class="secondColumn"><span class="gwt-CheckBox">
<input type="checkbox" id="isEmp" tabindex="0" checked=""><label for="isEmp">I own this device</label></span></td>
</tr>
<tr class="lastRow">
<td colspan="2">
<div class="registerButtons" align="center">
<button type="button" onclick="performRegister()" tabindex="0" id="registerButton" disabled>Register</button>
<button type="button" tabindex="0">Clear</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<p style="text-align: center" class="auto-style1">
Application Version 1.5<br />
</div>
</center>
</body>
</html>
I've also created a CodePen and a JsFiddle for you.
Related
I would like to create a html template that when print in chrome browser, the header and footer will fixed on the top and bottom of the page. The tbody will be in between of header and footer. It's height is the total height after minus header and footer. If the tbody exceed the height, it will break into next page. Now, I am having issue that when printing the html template, the tbody will overlap the tfoot and thead on the next page, as shown in these pictures. Please kindly advice. My html template is on the below github link.
.
The HTML is in my github repository. Please help to check on this link.
MyTemplate
Below is my code and my reference for dealing page break for large html table.
Reference
This is a short snippet of my code structure
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
html,
body,
* {
margin: 0;
padding: 0;
}
table {
page-break-inside: auto;
border-collapse: collapse;
}
tr {
page-break-inside: avoid;
page-break-after: auto
}
td {
page-break-inside: avoid;
page-break-after: auto
}
div {
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group
}
/* tbody {
display: table;
width: 100%;
table-layout: fixed;
} */
#media screen {
div.divFooter {
display: none;
}
div.divHeader {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
height: 250px;
bottom: 0;
left: 0;
text-align: left;
display: block;
}
div.divHeader {
position: fixed;
height: 100px;
top: 0;
left: 0;
display: block;
}
div.divBody {
height: calc(100% - 350px);
position: relative;
text-align: left;
margin-top: 20rem;
margin-bottom: -20rem;
page-break-after: always;
}
}
</style>
</head>
<body>
<table style="width: 100%;">
<thead>
<tr>
<th>
<div class="divHeader" style="display: inline-block; width: 100%;">
<table style="width: 100%; text-align: left;">
<tr>
<td><img style="width: 120px; height: 120px;"
src="https://bp.doctor2u.my/assets/img/bplogo.png">
</td>
<td style="vertical-align: top; ">
<table>
<tr style="margin-left: 1 rem;">
<td colspan="2">
<a
style="font-family:Helvetica;font-weight: bold; font-size: 20pt;">
PATHOLOGY
REPORT
</a>
</td>
</tr>
<tr>
<td colspan="2">
<span>B. P. CLINICAL LAB SDN. BHD. (152314-H)</span>
</td>
</tr>
<tr>
<td>
<span>[BranchAddress] ,</span>
</td>
<td>
<span> [BranchEmail]</span>
</td>
</tr>
<tr>
<td>
<label>Tel : </label><span>[BranchTel]</span>
</td>
<td>
<label>Fax : </label><span>[BranchFax]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>GST Reg No. : </label><span>[GST]</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 100%; text-align: left;">
<tr>
<td>
<label>Client PatientID :</label><span>[ClientId]</span>
</td>
<td colspan="2">
<label>Barcode :</label><span>[LabNo]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>Patient Name :</label><span>[PatientName]</span>
</td>
<td>
<label>Age/Gender :</label><span>[Age] / [Gender]</span>
</td>
</tr>
<tr class="spaceUnder">
<td>
<label>NRIC No :</label><span>[IC]</span>
</td>
<td>
<label>Refer No :</label><span>[ReferNo]</span>
</td>
<td>
<label>Branch :</label><span>[BranchName]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>Client Name :</label><span>[ClinicName]</span>
</td>
<td>
<label>Tel :</label><span>[Tel]</span>
</td>
</tr>
<tr class="spaceUnder2">
<td colspan="2">
<label>Doctor’s Name :</label><span>[DoctorName]</span>
</td>
<td>
<label>Fax:</label><span>[Fax]</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>Specimen :</label><span>[Specimen]</span><span>-sampled at
</span><span>[SampleDate]</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>Received :</label><span>[LabNo] by [ReceivedBranch]
[ReceiveDate]</span>
</td>
</tr>
</table>
<label for="" style="float: right;">Page 2 of 3</label>
<table
style="border-top: 5px solid black; width: 100%; border-spacing: 1rem; text-align: center;"
class="spaceUnderTable">
<tr class="spaceUnder">
<th>
<label for="">TEST NAME</label>
</th>
<th>
<label for="">RESULT</label>
</th>
<th>
<label for="">UNIT</label>
</th>
<th>
<label for="">REFERENCE NOTE</label>
</th>
<th>
<label for="">RESULT</label>
</th>
<th>
<label for="">UNIT</label>
</th>
<th>
<label for="">REFERENCE NOTE</label>
</th>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
<div class="divFooter" style="display: inline-block; width: 100%; left:0px;
bottom:0px; text-align: left;">
<table style="width: 100%; margin-top: 1rem;">
<tr>
<td rowspan="7" style="width: 20%;">
<!-- [Image] -->
</td>
</tr>
<tr>
<td>
Results validated and authorised through the Laboratory information
System.
</td>
</tr>
<tr>
<td>
Results checked and authorised for release
</td>
</tr>
<tr>
<td>
Test done at B.P. Clinical Lab Sdn. Bhd. (Ipoh) 273-B Jalan Raja
Permaisuri
Bainun,
30250
Ipoh, Perak.
</td>
</tr>
<tr>
<td>
Tel: 05-2559090 Fax:05-2419226
</td>
</tr>
<tr>
<td>
Ipoh lab is a MS ISO 15189 accredited lab
</td>
</tr>
<tr>
<td>
* Not SAMM Accredited
</td>
</tr>
<tr>
<td colspan="4">
<p style=" margin-top: 1rem; text-align: center;">
For further confirmation, please
repeat test with another
fresh
specimen, if desired.
Should
you
have further enquiries, please
contact your nearest BP branch or mail us at
corpcare#bphealthcare.com
<br>
[BranchAddress], [BranchEmail]
Tel: <span>[Tel]</span>,
Fax: [Fax]
</p>
</td>
</tr>
</table>
</div>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<div class="divBody">
<table style="width: 100%; border-spacing: 1rem; text-align: center;"
class="spaceUnderTable">
<!-- LIPIDS STUDIES -->
<tr>
<td style="text-align: left;">
<label for=""><strong>Full Blood Count</strong></label>
</td>
</tr>
<tr>
<td style="text-align: left;">
<label for="">Total RBC</label>
</td>
<td>
<label for="">[TotalRBCResult]</label>
</td>
<td>
<label for="">[TotalRBCUnit]</label>
</td>
<td>
<label for="">[TotalRBCRange]</label>
</td>
<td>
<label for="">[TotalRBCResult2]</label>
</td>
<td>
<label for="">[TotalRBCUnit2]</label>
</td>
<td>
<label for="">[TotalRBCRange2]</label>
</td>
</tr>
<!-- More row -->
<br>
<br>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
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 am very new to coding. In my first try i am not able to set column width of table using CSS. I have created fiddle also, please help.Tried different methods but resulting in equal width of each column. Want to fix column width in table. Pl help.
Refer jsfiddle http://jsfiddle.net/h8LmU/14/
html code:
<table summary="other expenses" id="otherexpense_table">
<col class="oc1" />
<col class="oc2" />
<col class="oc3" />
<col class="oc4" />
<col class="oc5" />
<thead>
<tr>
<th align="left" colspan="5"><strong>DETAILS OF OTHER
EXPENSES</strong>
</th>
</tr>
<tr>
<th align="center"><strong>Sl.
No.</strong>
</th>
<th align="center"> <strong>Date/Time</strong>
</th>
<th align="center"> <strong>Details</strong>
</th>
<th align="center"> <strong>Amount</strong>
</th>
<th class="oremove" align="center"> <strong>Edit/Remove</strong>
</th>
</tr>
</thead>
<tbody>
<tr id="tr_other_01">
<td align="center" id="tdosrno_01"></td>
<td align="center" id="tdodate_01"></td>
<td align="left" id="tdodetails_01"></td>
<td align="center" id="tdoamount_01"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_01" value="Edit" />
<input type="button" id="tdotherbtremove_01" value="Remove" />
</td>
</tr>
<tr id="tr_other_02">
<td align="center" id="tdosrno_02"></td>
<td align="center" id="tdodate_02"></td>
<td align="left" id="tdodetails_02"></td>
<td align="center" id="tdoamount_02"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_02" value="Edit" />
<input type="button" id="tdotherbtremove_02" value="Remove" />
</td>
</tr>
<tr id="tr_other_03">
<td align="center" id="tdosrno_03"></td>
<td align="center" id="tdodate_03"></td>
<td align="left" id="tdodetails_03"></td>
<td align="center" id="tdoamount_03"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_03" value="Edit" />
<input type="button" id="tdotherbtremove_03" value="Remove" />
</td>
</tr>
<tr id="tr_other_04">
<td align="center" id="tdosrno_04"></td>
<td align="center" id="tdodate_04"></td>
<td align="left" id="tdodetails_04"></td>
<td align="center" id="tdoamount_04"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_04" value="Edit" />
<input type="button" id="tdotherbtremove_04" value="Remove" />
</td>
</tr>
<tr id="tr_other_05">
<td align="center" id="tdosrno_05"></td>
<td align="center" id="tdodate_05"></td>
<td align="left" id="tdodetails_05"></td>
<td align="center" id="tdoamount_05"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_05" value="Edit" />
<input type="button" id="tdotherbtremove_05" value="Remove" />
</td>
</tr>
<tr id="tr_other_06">
<td align="center" id="tdosrno_06"></td>
<td align="center" id="tdodate_06"></td>
<td align="left" id="tdodetails_06"></td>
<td align="center" id="tdoamount_06"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_05" value="Edit" />
<input type="button" id="tdotherbtremove_05" value="Remove" />
</td>
</tr>
<tr id="tr_other_07">
<td align="center" id="tdosrno_07"></td>
<td align="center" id="tdodate_07"></td>
<td align="left" id="tdodetails_07"></td>
<td align="center" id="tdoamount_07"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_07" value="Edit" />
<input type="button" id="tdotherbtremove_07" value="Remove" />
</td>
</tr>
<tr id="tr_other_08">
<td align="center" id="tdosrno_08"></td>
<td align="center" id="tdodate_08"></td>
<td align="left" id="tdodetails_08"></td>
<td align="center" id="tdoamount_08"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_08" value="Edit" />
<input type="button" id="tdotherbtremove_08" value="Remove" />
</td>
</tr>
<tr id="tr_other_09">
<td align="center" id="tdosrno_09"></td>
<td align="center" id="tdodate_09"></td>
<td align="left" id="tdodetails_09"></td>
<td align="center" id="tdoamount_09"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_09" value="Edit" />
<input type="button" id="tdotherbtremove_09" value="Remove" />
</td>
</tr>
<tr id="tr_other_010">
<td align="center" id="tdosrno_010"></td>
<td align="center" id="tdodate_010"></td>
<td align="left" id="tdodetails_010"></td>
<td align="center" id="tdoamount_010"></td>
<td class="oremove">
<input type="button" id="tdotherbtedit_010" value="Edit" />
<input type="button" id="tdotherbtremove_010" value="Remove" />
</td>
</tr>
<tr id="tr_othertotal" style="display:none;">
<td colspan="3" align="right">Total 3:</td>
<td id="tdothertotal" align="center"></td>
</tr>
</tbody>
</table>
CSS code :
#otherexpense_table {
table-layout: fixed;
border: solid #001 2px;
width: 850px;
}
#otherexpense_table.oc1 {
width : 1%;
}
#otherexpense_table.oc2 {
width : 80%;
}
#otherexpense_table.oc3 {
width : 15%;
}
#otherexpense_table.oc4 {
width : 1%;
}
#otherexpense_table.oc5 {
width : 1%;
}
th
{
color : white;
background-color : #6C6CFF;
height : 25;
word-wrap:break-word;
font-size:11pt;
}
td
{
background-color : #CCCCCC;
font-size:10pt;
word-wrap:break-word;
}
Please remove the css
table-layout: fixed;
for detail plz go
http://www.w3schools.com/cssref/pr_tab_table-layout.asp
#otherexpense_table {
table-layout: fixed;
border: solid #001 2px;
width: 850px;
}
#otherexpense_table .oc1 { // add spaces between '#otherexpense_table' and '.oc1'
width : 1%;
}
#otherexpense_table .oc2 { // add spaces between '#otherexpense_table' and '.oc2'
width : 80%;
}
#otherexpense_table .oc3 { // add spaces between '#otherexpense_table' and '.oc3'
width : 15%;
}
#otherexpense_table .oc4 { // add spaces between '#otherexpense_table' and '.oc4'
width : 1%;
}
#otherexpense_table .oc5 { // add spaces between '#otherexpense_table' and '.oc5'
width : 1%;
}
th
{
color : white;
background-color : #6C6CFF;
height : 25;
word-wrap:break-word;
font-size:11pt;
}
td
{
background-color : #CCCCCC;
font-size:10pt;
word-wrap:break-word;
}
JSFiddle
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>
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...