I want my email, password etc to be the same width as Name and Surname Together but I am struggling to this.
<div id="container">
<table>
<tr>
<td><input type="text" name="emer" placeholder="Emri"></td>
<td><input type="text" name="mbiemer" placeholder="Mbiemri"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="email" placeholder="Emaili"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Password-i"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Rivendos Password-in"></td>
</tr>
</table>
</div>
Like this?
The input elements width needs to be set to 100% to take the width of the container!
td > input{
width:100%;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<table>
<tr>
<td><input type="text" name="emer" placeholder="Emri"></td>
<td><input type="text" name="mbiemer" placeholder="Mbiemri"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="email" placeholder="Emaili"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Password-i"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Rivendos Password-in"></td>
</tr>
</table>
</div>
</body>
</html>
Related
I am trying to bring the entry fields closer to the names; it looks bit far. wanted to see if anybody can suggest. Html and css are shown below. This is how it looks now:
<div id="container">
<h3>Add Student</h3>
<form action="StudentControllerServlet" method="GET">
<input type="hidden" name="command" value="ADD" />
<table>
<tbody>
<tr>
<td><label>First name:</label></td>
<td> <input type="text" name="firstName"/></td>
</tr>
<tr>
<td><label>Last name:</label></td>
<td><input type="text" name="lastName"/></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td> <input type="text" name="email" /></td>
</tr>
</tbody>
</table>
</form>
</div>
/* To mimic your screenshot */
#container table {
width: 50%;
outline: red 1px dotted;
}
/* To align your text closer */
#container table td:first-child {
outline: green 1px dashed;
text-align: right;
}
<div id="container">
<h3>Add Student</h3>
<form action="StudentControllerServlet" method="GET">
<input type="hidden" name="command" value="ADD" />
<table>
<tbody>
<tr>
<td><label>First name:</label></td>
<td> <input type="text" name="firstName"/></td>
</tr>
<tr>
<td><label>Last name:</label></td>
<td><input type="text" name="lastName"/></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td> <input type="text" name="email" /></td>
</tr>
</tbody>
</table>
</form>
</div>
I am very new to Bootstrap css, can any one help me to design table header like this, column is seperated by pipe like css
Below is css .
<style>
.table-bordered tbody tr td {
border: none !important;
}
.table-bordered tbody tr td input.form-control[type=text] {
border-radius: 0px !important;
}
#input_container {
position: relative;
direction: rtl;
}
#input_img {
position: absolute;
bottom: 4px;
right: 5px;
width: 24px;
height: 24px;
}
Here i have used "table table-bordered" class for table and using above css i have removed td border lines
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Product Name</th>
<th>Color/Size</th>
<th>Qty. Needed</th>
<th>Need By Date</th>
<th>Special Instructions</th>
<th>Art Files</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<div id="input_container">
<input class="form-control" type="text" id="input" value="">
<img src="~/Images/calendarImg.png" id="input_img">
</div>
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<input class="form-control" type="text" />
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td><input class="form-control" id="Text1" type="text" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6"><a>Add Rows</a></td>
</tr>
</tfoot>
</table>
I have created a demo for you. Take help and modify as per your requirement.
<table frame="box" rules="none" cellpadding="2" cellspasing="5"> <tr style="background-color:yellow; ">
<td colspan="4">
<table style="width:100%">
<tr>
<td style="width:25%;border-right: thin solid #000;">First</td>
<td style="width:25%;text-align:center; border-right: 1px solid #000;">Second</td>
<td style="width:25%;text-align:center;border-right: 1px solid #000;">Third</td>
<td style="width:25%;text-align:center;">Fourth</td>
</tr>
</table>
</td> </tr> <tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr> </tr> </table>
click here to see it in fiddle
I think My html code is messed up and I can't fix it.I he been workin on for 2 hours
this is the output
Please can you help me
<?php
if($_POST){
}
else{
echo '
<form action="" method="post">
<table cellspacing="5" cellpadding="5">
<tr>
<td>Ad</td>
<td><input type="text" name="ad"></td>
</tr>
<tr>
<td>Posta</td>
<td><input type="text" name="posta"></td>
</tr>
<tr>
<td>Mesaj</td>
<td><textarea rows="5" cols="30" name="mesaj"</textarea>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Gonder"></td>
</tr>
</table>
</form>
';
}
?>
<form action="" method="post">
<table cellspacing="5" cellpadding="5">
<tr>
<td>Ad</td>
<td>
<input type="text" name="ad">
</td>
</tr>
<tr>
<td>Posta</td>
<td>
<input type="text" name="posta">
</td>
</tr>
<tr>
<td>Mesaj</td>
<td>
<textarea rows="5" cols="30" name="mesaj"> </textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Gonder">
</td>
</tr>
</table>
</form>
You forgot to close the textarea tag and the td its in, also please use some indentation. it hurts my eyes!
<textarea> Missing '>' For End Of Tag (At line 13, column 9)
it should be
<form action="" method="post">
<table cellspacing="5" cellpadding="5">
<tr>
<td>Ad</td>
<td><input type="text" name="ad"></td>
</tr>
<tr>
<td>Posta</td>
<td><input type="text" name="posta"></td>
</tr>
<tr>
<td>Mesaj</td>
<td><textarea rows="5" cols="30" name="mesaj"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Gonder"></td>
</tr>
</table>
</form>
I am trying to develop a form, which has Emp details and Personal info details i need to display in the the below way.
This is my code
<table style="border: 1px solid; width: 900px; height: 200px; table-layout:fixed">
<tr>
<td>
<label for="Employee" style="height:20px">Employee:</label>
</td>
<td>
<label for="Id" style="height: 20px">Id</label>
</td>
<td>
<input type="text" id="txtId" />
</td>
<td>
<label for="Designation" style="height:20px">Designation</label>
</td>
<td>
<input type="text" id="txtDesig" />
</td>
</tr>
<tr>
<td></td>
<td> <label for="Mail" style="height: 20px">Mail</label></td>
<td> <input type="text" id="Text3" /> </td>
<td> <label style="height: 20px">Ext</label> </td>
<td> <input type="text" id="Text4" /> </td>
</tr>
<tr>
<td>
<label for="PersonalInfo" style="height:20px">Personal Info:</label>
</td>
<td>
<label for="Name" style="height:20px">Name:</label>
</td>
<td>
<input type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="City" style="height:20px">City:</label>
</td>
<td>
<input type="text" id="txtCity" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="State" style="height:20px">State:</label>
</td>
<td>
<input type="text" id="txtState" />
</td>
</tr>
</table>
The issue is the textboxes are not in the same line and the form looks weird.
You can start like this:
table{border: 1px solid; width: 1500px;}
table tr td label{width: 95px;display: inline-flex;}
<table>
<tr>
<td>
<label>Employee:</label>
</td>
<td>
<label id="lblId">Id</label>
<input type="text" id="txtId " />
<label id="lblDesig">Designation</label>
<input type="text" id="txtDesig" />
</td>
</tr>
<tr>
<td></td>
<td>
<label id="Label3">Mail</label>
<input type="text" id="Text3 " />
<label id="Label4 ">Ext</label>
<input type="text" id="Text4" />
</td>
</tr>
<tr>
<td>
<label>Personal Info:</label>
</td>
<td>
<label>Name:</label>
<input type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label>City:</label>
<input type="text" id="txtCity" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label>State:</label>
<input type="text" id="txtState" />
</td>
</tr>
</table>
I'm guessing you have to use tables for some reason? If not consider moving to using something a little more practical. Tables are cumbersome for this sort of thing. Having a column based approach would make a lot more sense.
In order to do this with tables, you're going to have to nest them. I only did a portion of the table to give you an idea of how to do it. So don't copy paste this. I took the IDs out to make it simpler to read. You'll obviously want those in there. Also when you run the code snippet make sure you scroll all the way left as the width is set to 1500. You can edit this when you apply it to your code. Just change where it says width: 33% to whatever you need.
<table style="border: 1px solid; width: 1500px; height: 400px;">
<tr>
<td style="width:33%;">
<label style="height:20px; width:33%;">Employee:</label></td>
</td>
<td style="width:33%;">
<table>
<tr>
<td><label height: 20px ">Id</label></td>
<td><input type="text " /></td>
<td><label id="lblDesig " height: 20px">Mail</label></td>
<td><input type="text" id="txtDesig" /></td>
</tr>
<tr>
<td><label style="height:20px;">Designation</label</td>
<td><input type="text" id="txtDesig" /></td>
<td><label id="lblId" height: 20px ">Ext</label></td>
<td><input type="text" id="txtDesig" /></td>
</tr>
</table>
</td>
</tr>
</table>
Normally table shouldn't be used for layout. Suggest using Bootstrap Grid system and Forms: http://getbootstrap.com/css/#grid
It gives you a modern/professional look, as well as handles different resolutions/devices for you nicely.
Here is a simple example:
<div class="row">
<div class="col-lg-2">
<label>Employee</label>
</div>
<div class="col-lg-5">
<div class="form-group">
<label for="Id" class="col-sm-2 control-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Id">
</div>
</div>
<div class="form-group">
<label for="Mail" class="col-sm-2 control-label">Mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Mail">
</div>
</div>
</div>
<div class="col-lg-5"></div>
</div>
I'm trying to get a scroll working on my page. When I add overflow-y: scroll. it makes the content inside the div section completely disappear.
The CSS I currently have in for the div section is: overflow-y: scroll, height: 100%. Am I missing something?
<div id = "section">
<div id = "map">
<h1 align = "center">Find Us!</h1>
<div id = "map-canvas"></div>
<p>
</p>
</div>
<div id = "form">
<form method="post" action="mailto: jbloggs#ait.ie">
<fieldset>
<h1 align="center">Contact Us</h1>
<table class="contacttable">
<tr align="left" valign="middle">
<td>First Name</td>
<td><input type="text" name="firstname"/></td>
</tr>
<tr align="left" valign="middle">
<td>Surname</td>
<td><input type="text" name="lastname"/></td>
</tr>
<tr>
<td>Address Line 1</td>
<td><input type="text" name="addressline1"/></td>
</tr>
<tr>
<td>Address Line 2</td>
<td><input type="text" name="addressline2"/></td>
</tr>
<tr>
<td>Town</td>
<td><input type="text" name="town"/></td>
</tr>
<tr>
<td>County</td>
<td><input type="text" name="county"/></td>
</tr>
<tr align="left" valign="middle">
<td><input type="radio" name="sex" value="male"/>Male</td>
<td><input type="radio" name="sex" value="female"/>Female</td>
</tr>
<tr>
<td>Date of Birth</td>
<td><input type="text" name="dob"/></td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
#section {
max-height: 150px; /*add height as you want*/
overflow-y: auto;
}
Go through this http://www.w3schools.com/cssref/pr_pos_overflow.asp
Is there a way to set vertical scrollbar for a div?
This might helps you :)