The input field width is not commenly set in browsers like chrome and firefox.see my code below
<table border="1" align="left" cellpadding="0" cellspacing="0" width="25%" style="margin-top: -90px;">
<tr>
<td colspan="3"><input id="ir-box" type="checkbox"/>Only show LIVE reports</td><td></td>
</tr>
<tr>
<td colspan="3"><input type="text" value="Keyword Search"/></td><td>{% include "buttons/go.html" %}</td>
</tr>
<tr>
<td colspan="4"><input id="incident-types"class="incident-type" type="text" value="All Incident types" /></td>
</tr>
<tr>
<td colspan="4"><input id="location-types"class="incident-type" type="text" value="All Location types"/></td>
</tr>
<tr>
<td colspan="2">From</td><td colspan="2">To</td>
</tr>
<tr>
<td colspan="2" width="30"><input class="datefield" id="fromdate" type="text" value="dd/mm/yyyy"/></td><td colspan="2" width="150"><input class="datefield" id="todate" type="text" value="dd/mm/yyyy"/></td>
</tr>
<tr>
<td></td><td></td><td></td><td>{% include "buttons/go.html" %}</td>
</tr>
</table>
css.
.datefield {
padding:0;
margin:0;
width:80px;
height:20px;
}
.incident-type {
padding:0;
margin:0;
width:250px;
height:20px;
}
May i know how to resolve this compatibility.
Thanks
your problem is not in the input field, but on table scale, try out my code on demo
HTML
<div class="wrapper">
<table border="1" align="left" cellpadding="0" cellspacing="0" width="25%">
<tr>
<td colspan="3"><input id="ir-box" type="checkbox"/>Only show LIVE reports</td><td></td>
</tr>
<tr>
<td colspan="3"><input type="text" value="Keyword Search"/></td><td>{% include "buttons/go.html" %}</td>
</tr>
<tr>
<td colspan="4"><input id="incident-types"class="incident-type" type="text" value="All Incident types" /></td>
</tr>
<tr>
<td colspan="4"><input id="location-types"class="incident-type" type="text" value="All Location types"/></td>
</tr>
<tr>
<td colspan="2">From</td><td colspan="2">To</td>
</tr>
<tr>
<td colspan="2" width="30"><input class="datefield" id="fromdate" type="text" value="dd/mm/yyyy"/></td><td colspan="2" width="150"><input class="datefield" id="todate" type="text" value="dd/mm/yyyy"/></td>
</tr>
<tr>
<td></td><td></td><td></td><td>{% include "buttons/go.html" %}</td>
</tr>
</table>
</div>
CSS
.wrapper {
width: 400px;
}
.wrapper table {
width: 100%;
}
.datefield {
padding:0;
margin:0;
width:80px;
height:20px;
}
.incident-type {
padding:0;
margin:0;
width:250px;
height:20px;
}
DEMO
http://jsfiddle.net/sqJyw/3/
EXPLANATION
I added div which wrap your table and table is retched to 100%
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'm trying to achieve this look for a table. I couldn't figure out how to space it like this. This is my code so far. How can i accomplish this?
<table class="table table-inverse" data-bind="foreach: todos">
<tr >
<td ><input type="checkbox" data-bind="checked: IsDone, click: $parent.updateTodo" /></td>
<td ><span data-bind="text: Description"></span></td>
<td ><small></small></td>
</tr>
</table>
Well you can check the following snippet, if you are looking for backward compatibility the following could be useful
.wrapper{padding:20px;background:blue;}
table tr td:last-child,table tr td:first-child{width:25px;}
table{width:100%;background:#fff;margin-bottom:5px}
table:last-child{margin-bottom:0;}
<div class="wrapper">
<table class="table table-inverse" data-bind="foreach: todos">
<tr>
<td>[#]</td>
<td><span data-bind="text: Description">Hello</span></td>
<td>[#]</td>
</tr>
</table>
<table class="table table-inverse" data-bind="foreach: todos">
<tr>
<td>[#]</td>
<td><span data-bind="text: Description">Hello</span></td>
<td>[#]</td>
</tr>
</table>
</div>
You can use flex-box to achieve this
body{
background:#3a9bcb;
}
table{
width:100%;
}
.flex-box {
display: flex;
margin-bottom: 5px;
padding: 10px;
background:#fff;
}
.col {
flex: 1 1;
}
.col:first-child,
.col:last-child {
flex: 0 0 30px;
}
<table>
<tr class=flex-box>
<td class=col>
<input type=checkbox>
</td>
<td class=col>
Placeholder text
</td>
<td class=col>
Trash
</td>
</tr>
<tr class=flex-box>
<td class=col>
<input type=checkbox>
</td>
<td class=col>
Placeholder text
</td>
<td class=col>
Trash
</td>
</tr>
</table>
I am having trouble getting a border on a table. Here is the html for the table it shows having a border in Dreamweaver but not on the live webpage. I also have other tables on the page and do not want them to have the borders just this one.
<table style="width: 100%;" border="1" bordercolor="#000000">
<tr>
<td colspan="2" align="center" valign="middle">Please comeplete form</td>
</tr>
<tr>
<td width="50%">Event Name:</td>
<td>
<input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>Date (YYYY-MM-DD):</td>
<td>
<textarea name="date" id="date"></textarea></td>
</tr>
<tr>
<td>Link to page:</td>
<td>
<input type="text" name="link" id="link"></td>
</tr>
<tr>
<td>Status:</td>
<td>
<input type="text" name="status" id="status"></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><input type="submit" name="submit" id="submit" value="Submit"></td>
</tr>
</table>
You can add CSS to bring it up to standard
Something like:
table.mytable{
border: 1px solid #000000;
}
and then add a class="mytable" attribute to your table
You can initially style it like:
table,td,th {
border-collapse:collapse;
border: 1px solid #000000;
}
And in this way further you can add this as a class.
I have a table with one tr & 2 tds. The 2 td's have tables. There is space between the 2 inner tables, which I don't want. Can someone suggest me how to remove this spacing.
Here is my mark up:
<table style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;">
<tr>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
<tr>
<td>Subscriber Name: </td>
<td>
<input type="text" id="Text1" /></td>
</tr>
<tr>
<td>Subscriber Id: </td>
<td>
<input type="text" id="Text2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button1" /></td>
</tr>
</table>
</td>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
<tr>
<td>Admin Name: </td>
<td>
<input type="text" id="Text3" /></td>
</tr>
<tr>
<td>Admin Id:</td>
<td>
<input type="text" id="Text4" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button2" /></td>
</tr>
</table>
</td>
</tr>
</table>
You need to set the padding of the cells themselves to 0. They do not inherit the padding of the table element.
<table style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;">
<tr>
<td style="padding-right: 0px;">
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
<tr>
<td>Subscriber Name: </td>
<td>
<input type="text" id="Text1" /></td>
</tr>
<tr>
<td>Subscriber Id: </td>
<td>
<input type="text" id="Text2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button1" /></td>
</tr>
</table>
</td>
<td style="padding-left: 0px;">
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
<tr>
<td>Admin Name: </td>
<td>
<input type="text" id="Text3" /></td>
</tr>
<tr>
<td>Admin Id:</td>
<td>
<input type="text" id="Text4" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button2" /></td>
</tr>
</table>
</td>
</tr>
You can simple use:
table {
border-collapse: collapse;
}
table{
border-collapse: collapse;
}
<table>
<tr>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
<tr>
<td>Subscriber Name: </td>
<td>
<input type="text" id="Text1" /></td>
</tr>
<tr>
<td>Subscriber Id: </td>
<td>
<input type="text" id="Text2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button1" /></td>
</tr>
</table>
</td>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
<tr>
<td>Admin Name: </td>
<td>
<input type="text" id="Text3" /></td>
</tr>
<tr>
<td>Admin Id:</td>
<td>
<input type="text" id="Text4" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button2" /></td>
</tr>
</table>
</td>
</tr>
</table>
include cellpadding="0" cellspacing="0" in the table tag
HTML
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
Fiddle Demo
I'm trying to create a form that clients would complete via the web, so far I've resorted to using various tables butted up against each other to get the view I'm looking for, one of the issues is that when the tables are next to each other the borders appear twice as thick.
I think I could probably turn certain borders on and off but this would be a pain to manage, is there a better way I should be doing this?
My form looks something like this (jsfiddle at http://jsfiddle.net/5AXKa/)
<html>
<head>
<style type="text/css">
#form table
{
width:100%;
}
td
{
border: 1px solid black;
}
table
{
border:1px solid black;
}
#form
{
width:1000px;
/*border:1px solid black;*/
}
.field
{
border-right:none;
}
table, tr, td
{
border-collapse:collapse;
}
#Logo
{
width:30%;
}
#TestName
{
width:40%;
}
#TestNumber
{
width:30%;
}
#heading
{
height:70px;
}
.title
{
text-align:center;
}
.Data
{
border-left:none;
border-right:none;
}
</style>
</head>
<body>
<div id="form">
<table>
<tr id="heading">
<td id="Logo">LOGO GOES HERE</td>
<td id="TestName">TEST NAME</td>
<td id="TestNumber">TEST NUMBER</td>
</tr>
</table>
<table id="CommonData">
<tr>
<td class="field">CLIENT:-</td>
<td class="data"></td>
<td class="field">SITE:-</td>
<td class="data"></td>
<td class="field">Contract NO:-</td>
<td class="data"></td>
</tr>
<tr>
<td class="field">DUTY:-</td>
<td class="data"></td>
<td class="field">TAG No:-</td>
<td class="data"></td>
<td class="field">Loop No:-</td>
<td class="data"></td>
</tr>
<tr>
<td class="field">SYSTEM No:-</td>
<td class="data"></td>
<td class="field">SYSTEM REF:-</td>
<td class="data"></td>
<td class="field">DWG No:-</td>
<td class="data"></td>
</tr>
<tr>
<td class="field">CTP No:-</td>
<td class="data"></td>
<td colspan="4"></td>
</tr>
</table>
<table>
<tr class="title">
<td>INSTRUMENT / APPLIANCE</td>
</tr>
</table>
<table style="float:left;width:50%">
<tr>
<td colspan="2">INSTRUMENT DETAILS:</td>
</tr>
<tr>
<td>MANUFACTURER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SERIAL No:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SIZE:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SERVICE DATA SHEET REF:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>POWER SUPPLY:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>MODEL NO:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>IP RATING:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>RANGE/SPAN</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
</table>
<table style="float:right; width:50%">
<tr>
<td>INSTRUMENT TYPE</td>
<td>TICK BOX</td>
</tr>
<tr>
<td>PROXIMITY SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>LIMIT SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>FLOAT SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>ULTRASONIC</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>THERMOCOUPLE</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>PRESSURE SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>f
</tr>
<tr>
<td>TEMPERATURE SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>FLOW SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>CONDUCITIVITY METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>TURBIDITY METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>CHEMICAL RESIDUAL ANALYSER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>FLOW METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>PH METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
</table>
<table>
<tr class="title">
<td>MONITOR / CONVERTER</td>
</tr>
<table>
<table>
<tr>
<td>PLANT UNIT:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
<td>INSTRUMENT TYPE:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SERIAL No:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
<td>SPAN:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>POWER SUPPLY:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
<td>OTHER:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<table>
</body>
</html>
Simplify your table structure. If possible, use a single table, with one item on one row—there is normally no need to simulate printed forms (where you try to put everything on one sheet of paper) when designing a web form. Don’t use all uppercase, and put heading-like items in bold to clarify the structure of the form. Do not set widths for cells—it is part of the basic benefits of using tables that you can leave width allocation to browsers.
Your problems with borders are just one symptom of too complicated a design. When using a single table, adjacent browsers collapse when you just set cellspacing=0 in the table tag or border-collapse: collapse in CSS.
Instead of using a bunch of tables with a single div, you can use divs and specify the margin around the div.
This is a beginning.
Use a fieldset for each column.
Put every label and input in a div.
CSS:
fieldset {
float: left;
}
label {
clear: both; // Start the label at a new line
display: block;
float: left;
width: 100px;
{
input {
display: block;
float: left;
}
HTML:
<div><label for="field1">Field1</label><input type="text" name="field1" id="field1" /></div>
<div><label for="field1">Field2</label><input type="text" name="field2" id="field2" /></div>
etc...