how to draw a horizontal line touching from td 1 td 4 with out using content css
I am expecting as below progress bar
<table>
<hr>
<tr style="border-bottom:1px solid black;">
<td>
<div class="circle"><span id="progressindex">1</span></div>
</td>
<td>
<div class="circle">2</div>
</td>
<td>
<div class="circle">3</div>
</td>
<td>
<div class="circle">4</div>
</td>
</tr>
</table>
Without using CSS you cannot do it.
Try this way but it uses CSS and also gives what you want.
HTML
<html>
<head>
<title>Step Progress bar</title>
</head>
<body>
<div class="container">
<ul class="progressbar">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</body>
</html>
CSS
.container {
width: 100%;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style: none;
display: inline-block;
width: 30.33%;
position: relative;
text-align: center;
cursor: pointer;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
line-height : 30px;
border: 1px solid #ddd;
border-radius: 100%;
display: block;
text-align: center;
margin: 0 auto 10px auto;
background-color: #fff;
}
.progressbar li:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index : -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: green;
}
.progressbar li.active + li:after {
background-color: green;
}
i think when you click Run code snippet you'll see the last table .. i think is better
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<style type="text/css">
.addouterline{
border-bottom:1px solid red;
color:red;
}
.roundnormal{border-radius: 70%;
text-align:center;
margin-bottom:30px;
line-height:20px;
width:40px;
height:30px;
border:1px solid black;
}
.roundthis{border-radius: 70%;
text-align:center;
margin-bottom:30px;
line-height:20px;
width:40px;
height:30px;
border:1px solid red;
color:red;
}
</style>
From 1 to 4 :
<table width="400px" cellpadding="0" cellspacing="0">
<!-- <hr>
<tr style="border-bottom:1px solid black;">-->
<tr align="center">
<td align="right"><span style="width:100px;" class="addouterline"> </span></td><td class="addouterline" width="200px"></td><td class="addouterline" width="200px"></td><td align="left"><span style="width:100px;" class="addouterline"> </span></td>
</tr>
<tr align="center">
<td style="color:red">|</td><td></td><td></td><td style="color:red">|</td>
</tr>
<tr align="center">
<td>
<div class="circle"><!-- <span id="progressindex"> -->1<!-- </span> --></div>
</td>
<td>
<div class="circle">2</div>
</td>
<td>
<div class="circle">3</div>
</td>
<td>
<div class="circle">4</div>
</td>
</tr>
</table>
<br>
<hr>
<br>
From 1 to 3 :
<table width="400px" cellpadding="0" cellspacing="0">
<!-- <hr>
<tr style="border-bottom:1px solid black;">-->
<tr align="center">
<td align="right"><span style="width:100px;" class="addouterline"> </span></td><td class="addouterline" width="200px"></td><td align="left"><span style="width:100px;" class="addouterline"> </span></td><td width="200px"></td>
</tr>
<tr align="center">
<td>|</td><td></td><td>|</td><td></td>
</tr>
<tr align="center">
<td>
<div class="circle"><!-- <span id="progressindex"> -->1<!-- </span> --></div>
</td>
<td>
<div class="circle">2</div>
</td>
<td>
<div class="circle">3</div>
</td>
<td>
<div class="circle">4</div>
</td>
</tr>
</table>
<br>
<hr>
<br>
From 2 to 4 :
<table width="400px" cellpadding="0" cellspacing="0">
<!-- <hr>
<tr style="border-bottom:1px solid black;">-->
<tr align="center">
<td width="200px"></td><td align="right"><span style="width:100px;" class="addouterline"> </span></td><td class="addouterline" width="200px"></td><td align="left"><span style="width:100px;" class="addouterline"> </span></td>
</tr>
<tr align="center">
<td></td><td style="color:red">|</td><td></td><td style="color:red">|</td>
</tr>
<tr align="center">
<td>
<div class="circle"><!-- <span id="progressindex"> --><span class="roundnormal"> 1 </span><!-- </span> --></div>
</td>
<td>
<div class="circle"><span class="roundthis"> 2 </span></div>
</td>
<td>
<div class="circle"><span class="roundnormal"> 3 </span></div>
</td>
<td>
<div class="circle"><span class="roundthis"> 4 </span></div>
</td>
</tr>
</table>
</body>
</html>
Related
All of this is made with angular 12 and with ngx-print library
I have tabular data that I needs to display and I achieved the look and feel with HTML :
<div id="changeOrder">
<body>
<div *ngIf="allReports">
<!-- style="size: A4; display: block;height: 100%;" -->
<table style="size: A4; height: 100%;" *ngFor="let item of response">
<!-- Here the header starts -->
<div class="">
<div class="">
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="" style=" border-bottom: 1px solid black;">
<div class="">
<div class="">
<img src="../../../../../../../assets//img/logo_rr.png" alt="Logo"
style="height: 50px;" />
</div>
<table style="width:100%;">
<thead class="" style="width:100%;">
<tr>
<td style="width:155px;">
<h2>Change Order</h2>
</td>
<td>
<h2>{{item.CHANGEORDERID}} </h2>
</td>
</tr>
</thead>
</table>
</div>
</div>
</td>
</tr>
</div>
</div>
<!-- Here the header Ends -->
<tbody style="display: block;height: 100%;">
<tr>
<td>
<h3>Tasks</h3>
<table style="size: A4; height: 100%;">
<thead>
<tr>
<td>
<b>Name</b>
</td>
<td style="width:400px">
<b>Description</b>
</td>
<td>
<b>Status</b>
</td>
<td>
<b>Due Date</b>
</td>
</tr>
</thead>
<tbody *ngFor="let child of item.taskChild;">
<tr>
<td>{{ child.TDOTNUMBER }} </td>
<td style="width:400px">{{child.TASKSUMMARY}} </td
<td>{{child.TSTATUS}}</td>
<td>{{child.TDUEDATE_ORIG_TYPE}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr class="outer-row">
<td>
<div class="page-footer-space">
<!-- <b>Printed On</b> {{printedDate}} -->
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</div>
and with this CSS :
.page-footer-space,
.page-footer {
height: 100px;
}
.page-footer {
position: fixed;
bottom: 0px;
/* width: 100%; */
}
.page {
page-break-after: always;
}
#page {
margin: 10mm !important;
size: landscape;
}
#media print {
table {
font-size: .8rem;
width: 100%;
height: 90vh;
border: solid;
table-layout: fixed;
}
tbody {
margin: 10mm;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
}
Basically the data when it gets printed it look great,sometimes each report occupies more than 1 page, but what I need to achieve is that whenever an item of response is finished it does not matter at what point of the printing page it finished, the rest of the page needs to be blank and then the next item in the iteration should be printing.
I have not been successful in achieving that break-page at the end of the table.
This is how it currently looks:
So, I'm trying to redesign how our product descriptions look on eBay, but am having trouble figuring out how to get the first tab to be open automatically. With how its setup now, it's you have to click on Product Description (tab) to display its contents. I can't seem to figure out where or what I have to add to have it automatically open.
Can anyone offer any assistance?
Thanks!!
<style type="text/css">.css-tabs {
position: relative;
text-align: center;
/* This is only if you want the tab items at the center */
}
.css-tabs ul.menu {
list-style-type: none;
display: inline-block;
/* Change this to block or inline for non-center alignment */
}
.css-tabs ul.menu>li {
display: block;
float: left;
}
.css-tabs ul.menu li>a {
color: #000;
text-decoration: none;
display: absolute;
text-align: center;
border: 1px solid #808080;
padding: 5px 10px 5px 10px;
margin-right: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 5px;
-moz-user-select: none;
cursor: pointer;
}
.css-tabs ul.menu li>div {
display: none;
position: absolute;
width: 100%;
left: 0;
margin: -1px 0 0 0;
z-index: -1;
text-align: left;
padding: 0;
}
.css-tabs ul.menu li>div>p {
border: 0px solid #808080;
padding: 10px;
margin: 0;
}
.css-tabs ul.menu li>a:focus {
border-bottom: 1px solid #fff;
}
.css-tabs ul.menu li:target>a {
cursor: default;
border-bottom: 1px solid #fff;
}
.css-tabs ul.menu li:target>div {
display: block;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Ebay Template</title>
</style>
</head>
<body>
<center>
<p><img src="https://centralvalleycomputerparts.com/product_images/uploaded_images/location.png" width="100%" height="166" /></p>
<table style="height: 651px; width: 100%;" border=0>
<tbody>
<tr style="height: 493px;">
<td style="width: 18.9401%; height: 493px;">
<table style="height: 485px;" width="152">
<tbody>
<tr>
<td style="width: 142px; text-align: right;"><strong>
<font size = 5>
Categories<font></strong></td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">
<hr>All Products
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Add-On Cards
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Accessories
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Cables
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Cisco
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Desktops/Laptops/Servers
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Electronics
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Hard Drives
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Heat Sinks
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Keyboards
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Memory / RAM
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Motherboards
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Power Supplies
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Processors
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Server Components
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">SSDs
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Video Cards
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Other
<hr>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 78.9688%; height: 493px;">
<p>
<!-- it goes here -->
<form method="get" action="http://www.ebay.com/sch/i.html" target="_blank">
<table style="margin:auto; font-family:arial; text-align:left; background:#ddd; border:1px solid #888; border-radius:.25em">
<tbody>
<tr>
<td>
<input type="hidden" name="_ssn" value="central_valley_computer_parts_inc">
<input type="hidden" name="_sop" value="12">
<input type="text" name="_nkw" value="">
<input type="submit" value="Search">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="LH_TitleDesc" value="1">
<small>include description</small>
</td>
</tr>
</tbody>
</table>
</form>
<div id="tab2" class="css-tabs">
<ul class="menu">
<li id="item-1">
<a href="#item-1">
<font face="Helvetica" size=5>Product Description</font>
</a>
<div>
<p>
<!-- ******************************-->
<!-- Product Description goes here -->
<!-- ******************************-->
<center>
<img src="https://cdn8.bigcommerce.com/s-bxaxkh/product_images/uploaded_images/product-description.png?t=1532892462&_ga=2.208211035.830779260.1532892407-1079763816.1532576134">
</center>
<!-- ******************************-->
<!-- Product Description Ends here -->
<!-- ******************************-->
</p>
</div>
</li>
<li id="item-2">
<a href="#item-2">
<font face="Helvetica" size=5>About Us</font>
</a>
<div>
<p>Central Valley Computer Parts, Inc. has been in business since 2010. What started as a home business and hobby 7 years ago has since grown into a full-blown business supporting 10 team members! We operate out of a warehouse in Ripon,
California and strive to provide the best customer service we can. We hope to serve you for many years to come!</p>
</div>
</li>
<li id="item-3">
<a href="#item-3">
<font face="Helvetica" size=5>Return Policy</font>
</a>
<div>
<p>
<!-- ******************************-->
<!-- Start Return Policy -->
<!-- ******************************-->
<img src="https://cdn6.bigcommerce.com/s-bxaxkh/product_images/uploaded_images/terms2-a.jpg?t=1504814802&_ga=2.109104901.102196424.1504814843-1761240196.1503617547">
<!-- ******************************-->
<!-- end return policy -->
<!-- ******************************-->
</p>
</div>
</li>
<li id="item-4" title="click for Tab 4">
<a href="#item-4">
<font face="Helvetica" size=5>Tab 4</font>
</a>
<div>
<p>Tab Content 4</p>
</div>
</li>
</ul>
</div>
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
 
<p>
<p>
 
<p>
<p>
 
</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
</body>
</html>
You can do it with javascript like following.
location.href=location.href+"#item-1";
http://jsbin.com/hogasozucu/edit?html,output
of course it is possible only with css3 like following
.css-tabs ul.menu li:first-child>a { cursor: default; border-bottom: 1px solid #fff; }
.css-tabs ul.menu li:first-child>div { display: block; }
please try it on jsbin.com/mazazomamu/edit?css,output
I am having trouble reducing the height of the table cells in rows 1 and 2. I tried setting the table rows to 100 pixels within html, but when I do that table cells below the row grow larger as if compensating for the missing space. I do not see this happening in the fiddle below, but I am having this problem in Chrome. I would appreciate any help. The relevant code is below, and the full page is in the fiddle.
https://jsfiddle.net/9qLg7c31/2/
HTML:
Resume Page
<br>
<table class="no-spacing">
<tr style="height:100px">
<td>
Northwestern University
</td>
<td>
Class of 2016
</td>
<td>
Bachelors of Science in Journalism
</td>
<td style="text-indent: 10px">
Integrated Marketing Certificate
</td>
</tr>
<tr>
<td>
Field
</td>
<td>
2012
</td>
<td>
2013
</td>
<td>
2014
</td>
<td>
2015
</td>
<td>
2016
</td>
</tr>
<tr>
<td>Content Marketing</td>
<td style="background-color:white">
<div class="dropdown";>
<img src="http://st.hzcdn.com/fimgs/5f33bbc80182569c_3779-w173-h173-b1-p0--whatasteele.jpg">
<div class="dropdown-content">
</div>
</div>
</td>
<td style="background-color: white">
</td>
<td>
</td>
<td style="background-color: white">
<div class="dropdown">
<img src="http://www.reelnreel.com/wp-content/uploads/2015/01/Wochit.png">
<div class="dropdown-content">
</div>
</div>
</td>
<td style="background-color:white">
</td>
</tr>
<tr>
<td>
Multimedia Journalism
</td>
<td>
</td>
<td>
</td>
<td style="background-color: blue">
<div class="dropdown">
<img src="http://www.complaintsboard.com/thumb.php?src=chicago-tribune.jpg&wmax=900&hmax=900&quality=90&nocrop=1&bname=120767">
<div class="dropdown-content">
</div>
</div>
</td>
<td style="background-color: black">
<div class="dropdown">
<div class="dropdown-content">
<img src="http://onekreate.com/wp-content/uploads/2014/04/40_Inc_Magazine.jpg">
</div>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>Volunteer Work</td>
<td style="background-color: purple">
<div class="dropdown">
<div class="dropdown-content">
<img src="https://pbs.twimg.com/profile_images/570772503543291904/uYixut-M.jpeg" style="width:100px; height:100px">
</div>
</td>
<td style="background-color: purple">
</td>
<td style="background-color: purple">
</td>
<td>
</td>
<td>
</tr>
</table>
CSS:
#resume {
width: 100%;
height: 150%;
background-color: rgb(0,300,200);
margin-bottom:0px;
z-index:0;
}
#resume table{
background-color: rgb(0,200,200);
margin-left: 2.5%;
width:95%;
height:100%;
padding-bottom:10px;
border-radius: 20px;
}
#resume table ul{
color: rgb(0,300,200);
font-size:20px;
}
.no-spacing {
border-spacing:0; /* Removes the cell spacing via CSS */
border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content{
display: hidden;
}
.dropdown:hover .dropdown-content{
display:block;
position: relative;
width:300px;
}
#resume table th{
padding:15px 0 15px 0;
}
#resume table img{
width:150px;
height:100px;
}
#resume table tr:nth-child(3), #resume table tr:nth-child(4), #resume table tr:nth-child(5){
height:200px;
}
I have to arrange my input text elements vertically. and with same height to all of them. I can make custom css class with height say height = "30px", It works perfect but when i zoom in or zoom out in browser there height increases or decreases.
How i can write correct css class to work them properly
ok this is complte html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Feedback System</title>
<script src="Jquery/jquery-1.8.3.js" type="text/javascript"></script>
<script src="Jquery/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
<link href="CSS/Header.css" rel="stylesheet" type="text/css" />
<link href="Jquery/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.textbox
{
font-weight:bold;
}
td
{
border:solid 1px #c1c1c1;
}
.style9
{
width: 500px;
border: 1px solid #00FFFF;
height: 442px;
}
.no
{
width:50px;
text-align:center;
}
.ques
{
width:250px;
}
.column
{
width:100px;
height:100%;
float:left;
border:none;
border-right:solid 1px gray;
overflow:hidden;
}
.ans_cell
{
width:94px;
}
input{
width:100%;
line-height:27.5px;
height:auto;
display:block;
text-align:center;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="tabbox"
style="top: 160px; left: 7px; position: absolute; height: 38px; width: 100%; text-align: center;"
class="style6">
Feedback Form</div>
<div style="top: 216px; left: 98px; position: absolute; border-radius:20px; border-bottom:solid 1px #33ccff; height: 61px; width: 86%; font-family: 'Times New Roman', Times, serif; color: #666666; font-size: medium; font-weight: bold; border-left-style: none; border-left-color: inherit; border-left-width: medium; border-right-style: none; border-right-color: inherit; border-right-width: medium; border-top-style: none; border-top-color: inherit; border-top-width: medium;">
<div style="top: 10px; float:left; left: 81px; position: absolute; height: 19px; width: 93%; font-family: 'Times New Roman', Times, serif; color: #666666; font-size: medium; font-weight: bold; margin-left: 40px;">
<div style="position:absolute; top: 0px; left: -79px; width: 467px; margin-left: 80px;">Name :
<span class="style7">Yadav Sagar Sampatrao</span></div>
<div style="position:absolute; top: 1px; left: 479px; width: 179px; right: 449px;">
Roll No : <span class="style7">4242</span></div>
<div style="position:absolute; top: 0px; left: 675px; width: 177px; right: 255px;">Class :
<span class="style7">B. E.</span></div>
<div style="position:absolute; top: -1px; left: 883px; width: 219px;">Deparment :
<span class="style7">CSE</span></div>
</div>
</div>
<div style="position:absolute; top: 314px; left: 126px; width: 1119px; height: 499px; border:solid 1px #c1c1c1;">
<table class="style9">
<tr id="sub_name">
<td class="no">
Sr. No.</td>
<td class="ques" style="text-align:right;">
subject</td>
</tr>
<tr id="teacher_name">
<td class="no">
</td>
<td class="ques">
Parmeters to be Evaluated / Name of Teacher</td>
</tr>
<tr id="Tr1">
<td class="no">
1</td>
<td class="ques">
Punctuality and Regularity</td>
</tr>
<tr id="Tr2">
<td class="no">
2 </td>
<td class="ques">
Subject Knowledge and Preparation</td>
</tr>
<tr id="Tr3">
<td class="no">
3</td>
<td class="ques">
Clarity of Communication Skilll and Speed of Delivery</td>
</tr>
<tr id="Tr4">
<td class="no">
4</td>
<td class="ques">
Clarity of writing on Black Board</td>
</tr>
<tr id="Tr5">
<td class="no">
5</td>
<td class="ques">
Use of teaching aids (ex- PPT, OHP, Models, Charts)</td>
</tr>
<tr id="Tr6">
<td class="no">
6</td>
<td class="ques">
Timely completion of Syllabus</td>
</tr>
<tr id="Tr7">
<td class="no">
7</td>
<td class="ques">
Understanding and Interest Generated in Subject</td>
</tr>
<tr id="Tr8">
<td class="no">
8</td>
<td class="ques">
Efforts improving academic performance of Students</td>
</tr>
<tr id="Tr9">
<td class="no">
9</td>
<td class="ques">
Class Control and Discipline</td>
</tr>
<tr id="Tr10">
<td class="no">
10</td>
<td class="ques">
Availability Outside Classroom for Discussion</td>
</tr>
<tr id="Tr11">
<td class="no">
11</td>
<td class="ques">
The attitude of Teacher towards Student</td>
</tr>
</table>
<div id="ans_window" style="position:absolute; top: 0px; left: 501px; width: 616px; height: 441px; border:solid 1px #33ccff;">
<div class="column">
<input type="text" disabled="disabled" />
<input type="text" disabled='disabled'/>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="column"></div>
</div>
</div>
</body>
</html>
Change the CSS for input element as follow:
input{
width:100%;
line-height:27.5px;
height:auto;
display:block;
text-align:center;
}
Add this to your css file
input[type=text]{height:30px !important;}
unless you don't give us a fiddle we can't give you a straight answer!
But i answered yesterday something about the zooming on browsers that you can see it here .
So 'maybe' (cause we have no full code yet) there is a problem on your border width cause its not the same with your left table! Does the problem exists in IE? Try insdead of using 'border', the 'outline' css style in order to avoid messing with zooming...
EDIT: i've made some changes on yout code to find the problem cause it was little messy. Here is the snippet that works in my browsers, i hope it helps:
.textbox
{
font-weight:bold;
}
.no
{
width:50px;
text-align:center;
}
.ques
{
width:250px;
}
.ans_cell
{
width:94px;
}
.column
{
position: relative;
width:100px;
display: table;
}
.column input{
height:32px;
vertical-align :middle;
width:100%;
display:table-cell;
padding:1px;
outline:1px solid black;
text-align:center;
}
.tableone {
position:absolute;
top: 314px;
left: 126px;
width: 1119px;
height: 499px;
border:solid 1px #c1c1c1;
}
.style9 td
{
height:34px;
outline:solid 1px #c1c1c1;
}
.style9 .ques {
width: 500px;
}
.style9
{
position: relative;
display: inline-block;
}
#ans_window {
position:relative;
display: inline-block;
border:solid 1px #33ccff;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Feedback System</title>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="Jquery/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
<link href="css/style2.css" rel="stylesheet" type="text/css" />
<link href="Jquery/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
</script>
</head>
<body>
<div id="tabbox"
style="top: 160px; left: 7px; position: absolute; height: 38px; width: 100%; text-align: center;"
class="style6">
Feedback Form</div>
<div style="top: 216px; left: 98px; position: absolute; border-radius:20px; border-bottom:solid 1px #33ccff; height: 61px; width: 86%; font-family: 'Times New Roman', Times, serif; color: #666666; font-size: medium; font-weight: bold; border-left-style: none; border-left-color: inherit; border-left-width: medium; border-right-style: none; border-right-color: inherit; border-right-width: medium; border-top-style: none; border-top-color: inherit; border-top-width: medium;">
<div style="top: 10px; float:left; left: 81px; position: absolute; height: 19px; width: 93%; font-family: 'Times New Roman', Times, serif; color: #666666; font-size: medium; font-weight: bold; margin-left: 40px;">
<div style="position:absolute; top: 0px; left: -79px; width: 467px; margin-left: 80px;">Name :
<span class="style7">Yadav Sagar Sampatrao</span></div>
<div style="position:absolute; top: 1px; left: 479px; width: 179px; right: 449px;">
Roll No : <span class="style7">4242</span></div>
<div style="position:absolute; top: 0px; left: 675px; width: 177px; right: 255px;">Class :
<span class="style7">B. E.</span></div>
<div style="position:absolute; top: -1px; left: 883px; width: 219px;">Deparment :
<span class="style7">CSE</span></div>
</div>
</div>
<div class="tableone">
<table class="style9">
<tr id="sub_name">
<td class="no">
Sr. No.</td>
<td class="ques" style="text-align:right;">
subject</td>
</tr>
<tr id="teacher_name">
<td class="no">
</td>
<td class="ques">
Parmeters to be Evaluated / Name of Teacher</td>
</tr>
<tr id="Tr1">
<td class="no">
1</td>
<td class="ques">
Punctuality and Regularity</td>
</tr>
<tr id="Tr2">
<td class="no">
2 </td>
<td class="ques">
Subject Knowledge and Preparation</td>
</tr>
<tr id="Tr3">
<td class="no">
3</td>
<td class="ques">
Clarity of Communication Skilll and Speed of Delivery</td>
</tr>
<tr id="Tr4">
<td class="no">
4</td>
<td class="ques">
Clarity of writing on Black Board</td>
</tr>
<tr id="Tr5">
<td class="no">
5</td>
<td class="ques">
Use of teaching aids (ex- PPT, OHP, Models, Charts)</td>
</tr>
<tr id="Tr6">
<td class="no">
6</td>
<td class="ques">
Timely completion of Syllabus</td>
</tr>
<tr id="Tr7">
<td class="no">
7</td>
<td class="ques">
Understanding and Interest Generated in Subject</td>
</tr>
<tr id="Tr8">
<td class="no">
8</td>
<td class="ques">
Efforts improving academic performance of Students</td>
</tr>
<tr id="Tr9">
<td class="no">
9</td>
<td class="ques">
Class Control and Discipline</td>
</tr>
<tr id="Tr10">
<td class="no">
10</td>
<td class="ques">
Availability Outside Classroom for Discussion</td>
</tr>
<tr id="Tr11">
<td class="no">
11</td>
<td class="ques">
The attitude of Teacher towards Student</td>
</tr>
</table>
<div id="ans_window" >
<div class="column">
<input type="text" disabled="disabled" />
<input type="text" disabled='disabled'/>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="column"></div>
</div>
</div>
</body>
</html>
Nest the input element in the table's column and set the height to inherit.
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/