Here there is a small example of my page. I need to disable all input fields but the scrollbar. This works perfectly on Chrome and Firefox, but not with IE.
tbody{
display:block;
height: 50px;
overflow-y: scroll;
}
<fieldset disabled>
<table>
<thead>
<tr><th>test</th></tr>
</thead>
<tbody>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
</tbody>
</table>
</fieldset>
Any suggestion?
Maybe like this?
tbody{
display:block;
height: 50px;
overflow-y: scroll;
}
<fieldset>
<table>
<tbody>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
</tbody>
</table>
</fieldset>
Or using pointer-events (still, user can tab through the inputs, but that can be prevented with tabindex="-1", but then again, why not just add disabled)
fieldset tbody {
display: inline-block;
height: 50px;
overflow-y: scroll;
}
fieldset tbody input {
pointer-events: none;
}
<fieldset>
<table>
<tbody>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
</tbody>
</table>
</fieldset>
Or use an extra div
fieldset div {
display: inline-block;
height: 50px;
overflow-y: scroll;
}
<fieldset>
<div>
<table disabled>
<tbody>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
</tbody>
</table>
</div>
</fieldset>
I suggest wrapping the fieldset in an extra div and apply your styles there.
IE seems to disable the scrollbar functionality on disabled elements.
.box {
display: inline-block;
height: 80px; overflow-y: scroll;
}
<div class="box">
<fieldset disabled>
<table>
<tbody>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
</tbody>
</table>
</fieldset>
</div>
Related
I have a text input in a data cell, and a header cell of the same column. I expect the hierarchy of calculating width would be header >> column >> text-input, since there's no explicit width setting of text-input. But it turns out the text input has a default width which makes it wider than the header, and thus determines the width of the column.
This the link to the code
.style-table {
text-align: left;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
}
<table class="style-table">
<tbody>
<tr style="background-color:#4CAF50;color:white;">
<th>gears</th>
<th>rate</th>
</tr>
<tr>
<td class="style-header-column">X1</td>
<td class="style-input-td">
<input id="X1-text" type="text" value="0" />
</td>
</tr>
<tr>
<td class="style-header-column">X10</td>
<td class="style-input-td">
<input id="X2-text" type="text" value="0" />
</td>
</tr>
<tr>
<td class="style-header-column">X100</td>
<td class="style-input-td">
<input id="X3-text" type="text" value="0" />
</td>
</tbody>
</table>
http://jsfiddle.net/ricecakebear/5686z44L/.
So how do I remove the default width of the text input, and let header determins the width of the column? Thanks.
input has a browser default of size = "20"
Add size = "1" to the input to reset this.
In addition, include your original css (width = 100%). This will allow the input to expand to match the th.
Also include box-sizing property to account for border (or reset this instead)
fiddle
table {
border-collapse: collapse;
}
.style-table {
text-align: left;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
}
<table class="style-table">
<tbody>
<tr style="background-color:#4CAF50;color:white;">
<th>gears</th>
<th>rate</th>
</tr>
<tr>
<td class="style-header-column">X1</td>
<td class="style-input-td">
<input id="X1-text" type="text" value="0" size="1" />
</td>
</tr>
<tr>
<td class="style-header-column">X10</td>
<td class="style-input-td">
<input id="X2-text" type="text" value="0" size="1" />
</td>
</tr>
<tr>
<td class="style-header-column">X100</td>
<td class="style-input-td">
<input id="X3-text" type="text" value="0" size="1" />
</td>
</tbody>
</table>
<br>
<table class="style-table">
<tbody>
<tr style="background-color:#4CAF50;color:white;">
<th>gears</th>
<th>A longer heading</th>
</tr>
<tr>
<td class="style-header-column">X1</td>
<td class="style-input-td">
<input id="X1-text" type="text" value="0" size="1" />
</td>
</tr>
<tr>
<td class="style-header-column">X10</td>
<td class="style-input-td">
<input id="X2-text" type="text" value="0" size="1" />
</td>
</tr>
<tr>
<td class="style-header-column">X100</td>
<td class="style-input-td">
<input id="X3-text" type="text" value="0" size="1" />
</td>
</tbody>
</table>
You can add width in th as you want
.style-table {
text-align: left;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
}
<table class="style-table">
<tbody>
<tr style="background-color:#4CAF50;color:white;">
<th width="60%">gears</th>
<th width="40%">rate</th>
</tr>
<tr>
<td class="style-header-column">X1</td>
<td class="style-input-td">
<input id="X1-text" type="text" value="0" />
</td>
</tr>
<tr>
<td class="style-header-column">X10</td>
<td class="style-input-td">
<input id="X2-text" type="text" value="0" />
</td>
</tr>
<tr>
<td class="style-header-column">X100</td>
<td class="style-input-td">
<input id="X3-text" type="text" value="0" />
</td>
</tbody>
</table>
You are using width:100%; for your input, you are not limiting the width of your column td.
So the input will take the default width.
.style-table {
text-align: left;
}
.style-input-td{
width:50px;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
}
<table class="style-table">
<tbody>
<tr style="background-color:#4CAF50;color:white;">
<th>gears</th>
<th>rate</th>
</tr>
<tr>
<td class="style-header-column">X1</td>
<td class="style-input-td">
<input id="X1-text" type="text" value="0" />
</td>
</tr>
<tr>
<td class="style-header-column">X10</td>
<td class="style-input-td">
<input id="X2-text" type="text" value="0" />
</td>
</tr>
<tr>
<td class="style-header-column">X100</td>
<td class="style-input-td">
<input id="X3-text" type="text" value="0" />
</td>
</tbody>
</table>
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'm not so good with using display values to organize forms, it would be great if you would give me an example of being able to organize in an up-to-date way.
I'm making a login/register system, and I want to center the input fields in the div. Here's the code of the login form:-
<body style='font-family: Times New Roman, verdana, sans-serif;'>
<div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
<h1>Register Now!</h1>
<br />
<form action='' method='post'/>
<table>
<tr>
<td>
<b>Username:</b>
</td>
<td>
<input type='text' name='username' style='padding: 4px'/>
</td>
<tr>
<td>
<b>Password:</b>
</td>
<td>
<input type='password' name='password' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<b>Re-enter Password</b>
</td>
<td>
<input type='passsword' name='passwordconfirm' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<b>First and Last Name:</b>
</td>
<td>
<input type='text' name='name' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<input type='submit' name='register' value='Complete Registration'/>
</td>
</tr>
</table>
</form>
<h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
</div>
</body>
Simplest possible is to give the form display: inline-block.
Setting text-align: left; on the table will control the labels text alignment
<body style='font-family: Times New Roman, verdana, sans-serif;'>
<div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
<h1>Register Now!</h1>
<br />
<form action='' method='post' style="display: inline-block" />
<table style="text-align: center;">
<tr>
<td>
<b>Username:</b>
</td>
<td>
<input type='text' name='username' style='padding: 4px'/>
</td>
<tr>
<td>
<b>Password:</b>
</td>
<td>
<input type='password' name='password' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<b>Re-enter Password</b>
</td>
<td>
<input type='passsword' name='passwordconfirm' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<b>First and Last Name:</b>
</td>
<td>
<input type='text' name='name' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type='submit' name='register' value='Complete Registration' style="width: 100%"/>
</td>
</tr>
</table>
</form>
<h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
</div>
</body>
Side note:
By updating the last tr like this, you'll get a nice positioned button too
<tr>
<td>
</td>
<td>
<input type='submit' name='register' value='Complete Registration' style="width: 100%"/>
</td>
</tr>
you could just add a css rule to your table
table{
margin:0 auto;
}
The Easiest way to do this is to use the center tag <center> </center>
I edited your code to center the entire form.
<body style='font-family: Times New Roman, verdana, sans-serif;'>
<div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
<h1>Register Now!</h1>
<br />
<center>
<form action='' method='post'/>
<table>
<tr>
<td>
<b>Username:</b>
</td>
<td>
<input type='text' name='username' style='padding: 4px'/>
</td>
<tr>
<td>
<b>Password:</b>
</td>
<td>
<input type='password' name='password' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<b>Re-enter Password</b>
</td>
<td>
<input type='passsword' name='passwordconfirm' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<b>First and Last Name:</b>
</td>
<td>
<input type='text' name='name' style='padding: 4px'/>
</td>
</tr>
<tr>
<td>
<input type='submit' name='register' value='Complete Registration'/>
</td>
</tr>
</table>
</form>
</center>
<h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
</div>
</body>
snippet below
form{
text-align:center;
}
#form_table{
display:inline-table;
}
<body style='font-family: Times New Roman, verdana, sans-serif;'>
<div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;' id="meta_container">
<h1>Register Now!</h1>
<br />
<form action='' method='post'/>
<table id="form_table">
<tr>
<td>
<b>Username:</b>
</td>
<td>
<input type='text' name='username' style='padding: 4px' />
</td>
<tr>
<td>
<b>Password:</b>
</td>
<td>
<input type='password' name='password' style='padding: 4px' />
</td>
</tr>
<tr>
<td>
<b>Re-enter Password</b>
</td>
<td>
<input type='passsword' name='passwordconfirm' style='padding: 4px' />
</td>
</tr>
<tr>
<td>
<b>First and Last Name:</b>
</td>
<td>
<input type='text' name='name' style='padding: 4px' />
</td>
</tr>
<tr>
<td>
<input type='submit' name='register' value='Complete Registration' />
</td>
</tr>
</table>
</form>
<h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
</div>
</body>
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 have a checkbox in a table and I cannot align them to the left.
<tr>
<td colspan="3" class="cb">
<input type="checkbox" name="cb" value="checked" /> this is a checkbox
</td>
</tr>
table.all td.cb{
color: #424242;
border:1px solid black;
margin:0 auto;
text-align:left;
}
I have tried many things, but the result is this:
I applied a border for demonstration purposes.
If I add float:left, I get this:
I used the same code in another webpage where it was working fine (there the table had 2 columns only).
Solution:
I already had this in my .css file which strangely caused the problem in spite of the colspan="3"
table.all td input{
width:90%;
float:left;
}
I changed it to
table.all td input.i{
width:90%;
float:left;
}
and added a class="i" to all the other input types and now it's working fine.
The whole form if necessary:
<div id="container_center">
<form>
<table class="minden">
<tr>
<td colspan="3">
<p class="title">Create new account</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="title2">Enter account holder information</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td>
<p>First name: *</p>
</td>
<td colspan="2">
<p>Last name: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="firstname" size="45">
</td>
<td colspan="2">
<input type="text" name="lastname" size="45">
</td>
</tr>
<tr>
<td>
<p>Email: *</p>
</td>
<td colspan="2">
<p>Email again: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="email" size="45">
</td>
<td colspan="2">
<input type="text" name="email2" size="45">
</td>
</tr>
<tr>
<td>
<p>Address 1: *</p>
</td>
<td colspan="2">
<p>Address 2:</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="address1" size="45">
</td>
<td colspan="2">
<input type="text" name="address2" size="45">
</td>
</tr>
<tr>
<td>
<p>Country: *</p>
</td>
</tr>
<tr>
<td>
<select name="country" class="sel_country">
<option value="">[Please Select]</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Germany">Germany</option>
</select>
</td>
</tr>
<tr>
<td>
<p>City: *</p>
</td>
<td>
<p>State/Province: *</p>
</td>
<td>
<p>Zip code: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="city" size="45">
</td>
<td>
<input type="text" name="state" size="30">
</td>
<td>
<input type="text" name="zip" size="10" class="zip">
</td>
</tr>
<tr>
<td>
<p>Phone number: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="phone" size="45">
</td>
</tr>
<tr>
<td colspan="3">
<p class="title3">Create your login</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td>
<p>Username: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="username" size="45">
</td>
</tr>
<tr>
<td>
<p>Password: *</p>
</td>
<td>
<p>Confirm password: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="password" size="45">
</td>
<td colspan="2">
<input type="text" name="password2" size="45">
</td>
</tr>
<tr>
<td colspan="3">
<p class="title3">Accept terms</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td colspan="3" class="cb">
<input type="checkbox" name="cb" value="checked"/>this is a checkbox
</td>
</tr>
<tr>
<td>
<ul>
<li>Terms of service</li>
<li>Privacy policy</li>
</ul>
</td>
</tr>
<tr>
<td class="submit" colspan="3">
<input type="submit" name="purchase" value="Purchase" id="submitbutton">
</td>
</tr>
</table>
</form>
</div>
You could also accomplish this by excluding the checkbox from your input style. For example, I was encountering a similar problem with this CSS:
input {
width: 300;
}
And fixed by changing to this:
input:not([type="checkbox"]) {
width: 300;
}