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>
Related
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 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...
I have been trying all morning to replicate the below however I cannot get the alignment correct, it seems that a row will match the height of the biggest td, I need to replicate this as pixel perfect as possible.
Below is my HTML,
<table cellspacing="0" cellpadding="0" border="0" align="center" style="height: 268px; width: 700px;">
<thead>
<tr>
<th valign="middle" align="center" style="height: 27px;" scope="col">Information</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Education & Training</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Marketing Services</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Digital Media</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Entertainment</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Business Services</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="middle" align="center" style="height: 27px;">Academic</td>
<td valign="middle" align="center" style="height: 27px;">For-profit schools</td>
<td valign="middle" align="center" style="height: 27px;">Agency</td>
<td valign="middle" align="center" style="height: 27px;">Internet</td>
<td valign="middle" align="center" style="height: 27px;">TV and Radio Broadcasting</td>
<td valign="middle" align="center" style="height: 27px;">Business Process Outsourcing</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">STM</td>
<td valign="middle" align="center" style="height: 27px;">Educational Technology</td>
<td valign="middle" align="center" style="height: 27px;">Digital</td>
<td valign="middle" align="center" style="height: 27px;">Mobile Distribution</td>
<td valign="middle" align="center" style="height: 27px;">Cinema</td>
<td valign="middle" align="center" style="height: 27px;">B2B Services</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Financial</td>
<td valign="middle" align="center" style="height: 27px;">Educational Services</td>
<td valign="middle" align="center" style="height: 27px;">Market Research</td>
<td valign="middle" align="center" style="height: 27px;">Online Gaming</td>
<td valign="middle" align="center" style="height: 27px;">Film, TV, Music and Sports Content and Rights</td>
<td valign="middle" align="center" style="height: 27px;">SaaS</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Business</td>
<td valign="middle" align="center" style="height: 27px;">Professional Training</td>
<td valign="middle" align="center" style="height: 27px;">Outdoor</td>
<td valign="middle" align="center" style="height: 27px;">Social Media</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Trade</td>
<td valign="middle" align="center" style="height: 27px;">Vocational Training</td>
<td valign="middle" align="center" style="height: 27px;">Public Relations</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Consumer</td>
<td valign="middle" align="center" style="height: 27px;">Sales Promotion</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Professional</td>
<td valign="middle" align="center" style="height: 27px;">Direct Marketing</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Lead Generation</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;"> </td>
<td valign="middle" align="center" style="height: 27px;"> </td>
</tr>
</tbody>
</table>
and my CSS,
#left table {
border:0 none;
}
#left th {
height:43px;
background:url(images/th_bg.jpg) top left repeat-x;
font-size:14px;
color:#fff;
font-family:"Times", "Times New Roman", "Serif";
}
#left tbody td {
text-align:center;
background:#99abb9;
border-right:1px solid #fff;
width:105px;
padding:10px 15px 0px 15px;
height:17px;
}
Looks like only two rows to me. A header row of th tags and a single row of td tags, each with a list of items.
You try to make one table-row per entry, but on the picture it looks like there are only two rows. One for header and one for data (data seperated by <br /> or with <p>...</p>).
Here is an shortened example (less columns, only basic formatting - you have to add the rest) just to show how it works:
<style type='text/css'>
thead > tr > td {
text-align:center;
vertical-align:middle;
background-color:#777777;
width:107px;
}
tbody > tr > td {
text-align:center;
background-color:#99abb9;
}
</style>
<table cellspacing="2px" border="0">
<thead>
<tr>
<td>Information</td>
<td>Education & Training</td>
<td>Marketing Services</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Academic<br /><br />
STM<br /><br />
Financial<br /><br />
Business<br /><br />
...
</td>
<td>
For-profit schools<br /><br />
Educational Technology<br /><br />
Educational Services<br /><br />
...
</td>
<td>
Agency<br /><br />
Digital<br /><br />
Market Research<br /><br />
Outdoor<br /><br />
Public Relations
</td>
</tr>
</tbody>
</table>
I have made a completely working demo, at http://dcm.net46.net/test/so/so.html. To make all the columns the same height, I just filled in the extra space with empty tds. To style the columns, I used colgroup and col elements. The rest was pretty easy.