The vertical scroll works, but the horizontal doesn't. My code:
<html >
<body >
<table style=" height:100%; width:100%">
<tr>
<td >
<div style=" overflow:scroll; height:100%; width:100%">
<table style=" width:2000px; height:2000px; ">
<tr><td></td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Table is not an ideal element to use unless u want to display a table/table of contents.
Always prefer divs than tables.
This should do inside ur <body>
<div style="height: 100%; width: 100%">
<div style="overflow: scroll; height: 100%; width: 100%">
<table style="width: 2000px; height: 2000px;">
<tr>
<td>
</td>
</tr>
</table>
</div>
With Table u will have to set table-layout:fixed ,
<table style="height: 100%; width: 100%; table-layout:fixed">
<tr>
<td>
<div style="overflow: scroll; height: 100%; width: 100%">
<table style="width: 2000px; height: 2000px;">
<tr>
<td style="width:50%; display:none">
</td>
<td style="width:50%; display:none">
</td>
</tr>
<tr>
<td>control here will auto-align to 50%</td>
<td>control here will auto-align to 50%</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
I have modified the td template. Please note that as well.
i changed your code like this
<html >
<body >
<table style=" height:100%; width:100%">
<tr>
<td >
<div style=" overflow:scroll; height:2000px; width:100%">
<table style=" width:2000px; height:2000px; overflow:scroll;">
<tr><td></td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
try this.it will work..
Related
Here is the code for aligning contact details:
<html>
<body>
<table width="900" class="contact-details">
<tr>
<td><img src="./images/Mobile.png"></td>
<td>
<p>832.674.6834</p>
</td>
<td><img src="./images/fax.png"></td>
<td>
<p>271.217.4981</p>
</td>
<td><img src="./images/email.png"></td>
<td>
<p>test#testpineced.com</p>
</td>
<td><img src="./images/address.png"></td>
<td>
<p>1055 Loremips Tr. Kity, TX</p>
</td>
</tr>
</table>
<style>
img {
/* width: 100%; */
display: block;
}
</style>
</body>
</html>
You can see there is gap difference in between images and text content. Can you please help me to make equal gap difference and fit full content inside the table class.
Please see the screenshot attached: https://imgur.com/a/tjd9UOo
use css class for td and for each td can specify the inline width & height
.img {
background-repeat:no-repeat;
background-size: cover;
}
<table width="900" class="contact-details">
<tr>
<td style="background-image:url(./images/Mobile.png); width: 50px; height: 80px;"> </td>
<td><p>832.674.6834</p></td>
<td class="img" style="background-image:url(./images/fax.png); width: 50px; height: 80px;"> </td>
<td><p>271.217.4981</p></td>
<td class="img" style="background-image:url(./images/email.png); width: 50px; height: 80px;"> </td>
<td><p>test#testpineced.com</p></td>
<td class="img" style="background-image:url(./images/address.png); width: 50px; height: 80px;"> </td>
<td><p>1055 Loremips Tr. Kity, TX</p></td>
</tr>
</table>
<table width="900" class="contact-details" >
<tr>
<td style='width: 30px'><img style='width: 30px' src="./images/Mobile.png"></td>
<td>832.674.6834</td>
<td style='width: 30px'><img style='width: 30px' src="./images/fax.png"></td>
<td>271.217.4981</td>
<td style='width: 30px'><img style='width: 30px' src="./images/email.png"></td>
<td>test#testpineced.com</td>
<td style='width: 30px'><img style='width: 30px' src="./images/address.png"></td>
<td>1055 Loremips Tr. Kity, TX</td>
</tr>
just change the width px according to the image width
**You have to remove width="900" and add padding to <td> element**
<html>
<head>
<style>
img {
/* width: 100%; */
display: block;
}
table{
margin:0 auto;
}
td{
padding-top:5%;
padding-left: 1%;
}
</style>
</head>
<body>
<table class="contact-details">
<tr>
<td><img src="./images/Mobile.png"></td>
<td>
<p>832.674.6834</p>
</td>
<td><img src="./images/fax.png"></td>
<td>
<p>271.217.4981</p>
</td>
<td><img src="./images/email.png"></td>
<td>
<p>test#testpineced.com</p>
</td>
<td><img src="./images/address.png"></td>
<td>
<p>1055 Loremips Tr. Kity, TX</p>
</td>
</tr>
</table>
</body>
</html>
I need my table to align at the bottom of my div, I've tried adding to the table's style the attributes : position:absolute;bottom:0px but it changed according to the page and not the div. I posted the full code (with img tag) cus i'm not sure about the influence of other tags.
//HTML
<div>
<img src="Img/flower" style="width: 960px; height: 474px; z-index: -1; position: absolute" />
<table style="width:100%;height:120px;">
<tr>
<td style="background-color:gray">
</td>
<td style="background-color:green">
</td>
<td style="background-color:yellow">
</td>
<td style="background-color:red">
</td>
<td style="background-color:lime">
</td>
<td style="background-color:maroon">
</td>
</tr>
</table></div>
Your parent "div" and "img" should be declared as "position:relative" in this
case.
here is your solution:
<div style="position: relative;">
<img src="Img/flower" style="width: 960px; height: 474px; z-index: -1; position: relative;">
<table style="width: 100%; height: 120px;">
<tbody><tr>
<td style="background-color:gray">
</td>
<td style="background-color:green">
</td>
<td style="background-color:yellow">
</td>
<td style="background-color:red">
</td>
<td style="background-color:lime">
</td>
<td style="background-color:maroon">
</td>
</tr>
</tbody></table>
</div>
You can also use CSS Flexbox (check browser support) to vertical align:
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
<div class="Aligner">
<div class="Aligner-item Aligner-item--bottom">…</div>
</div>
<style>
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
.Aligner-item--bottom {
align-self: flex-end;
}
<style>
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.
I am a beginner and I have a doubt. I created this HTML table and I need to place the footer at the bottom of the page without using footer tag. Is there any way to place the footer at the bottom by using table? It will be helpful
<table>
<tr>
<h2><img src="lock.jpg" width="80" height="30"/>Welcome to Locker</h2>
</tr>
<tr>
<td>
<form>
<table align="center">
<tr>
<td align="right">
<h4><p> Lock name:</p></h4>
</td>
<td align="left">
<h4>
<input type="text" maxlength="8" name="lock" onkeyup="return AllowLock()"/>
</h4>
</td>
<td>
<h6 id="errfn"> </h6>
</td>
</tr>
<tr>
<td align="right">
<h4><p> Key:</p></h4>
</td>
<td align="left">
<h4>
<input type="text" maxlength="8" name="keys" onkeyup="return AllowKey()"/>
</h4>
</td>
<td>
<h6 id="error"></h6>
</td>
</tr>
<tr>
<td align="right"></td>
<td align="left">
<input id="gobutton" type="submit" value="Go!"/>
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td>
<p id="about">About</p>
<p id="contact">Contact us</p>
<p id="career">Careers</p>
<p id="press">Press</p>
</td>
</tr>
</table>
have a look here http://jsfiddle.net/25LKc/
use a <div><!-- footer content here --></div> as a wrapper
with position fixed;
<!-- your html here -->
</td>
</table>
<div class="footer"></div>
<style type="text/css">
.footer {
background-color:orange;
width:100%;
height:400px;
position:fixed;
bottom:0px;
}
</style>
You can use some CSS and a bit of HTML to place it, in your table tab have:
and then above it have some code for css like:
<script>
.table {
position:fixed;
bottom:0px;
}
</script>
This will place the table at the bottom
Answering your question, for your table layout to have 100% height you need to set some CSS properties:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#my_table {
height: 100%;
}
And in the HTML:
<table id="my_table">...</table>
You can place any element to the bottom by just adding this css to any of your classes or id's.
//CSS
{
position:fixed; /*Set this to absolute if you do not want it to be on bottom always*/
width:100%;
bottom:0px;
left:0px;
height:80px;
}
//Practical Usage
<html>
<head>
<style type="text/css">
.footer {
position: fixed;
width: 100%;
bottom: 0px;
left: 0px;
background: rgb(216, 216, 216);
height: 80px;
text-align: center;
}
.content {
position: relative;
width: 100%;
background: rgb(16, 16, 85);
height: 600px;
margin-bottom: 100px;
color: white;
}
</style>
</head>
<body>
<!--Page Content-->
<div class="content">
<table align="center">
<tr>
<td>Sample1</td>
<td>Sample2</td>
</tr>
<tr>
<td>Sample1</td>
<td>Sample2</td>
</tr>
</table>
</div>
<!--Footer Table-->
<table class="footer">
<td>Footer Goes Here</td>
</table>
</body>
</html>
JSFiddle Example I've Created : http://jsfiddle.net/mm6qc/
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...