I have several forms like this:
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table_std">
<tr id="exam_String_newValue_row">
<td width="150" class="table_defaultHeaderColumn">Προκαθορισμένη Τιμές</td>
<td width="802" class="table_defaultHeaderColumn" >
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</td>
</tr>
<tr>
<td width="150" class="table_defaultHeaderColumn">Διάγνωση - Αληθής</td>
<td width="802">
<input name="Exam_String_value" type="text" style="width:600px" id="textfield2" />
</td>
</tr>
<tr>
<td width="150" class="table_defaultHeaderColumn">Διάγνωση - Ψευδής</td>
<td width="802">
<input name="Exam_String_value" type="text" style="width:600px" id="textfield2" />
</td>
</tr>
</table>
css
.table_defaultHeaderColumn {
font-size: 11px;
}
.input_std {
width: 200px;
}
.input_small {
width: 4em;
}
.table_std {
border-collapse:collapse;
}
.table_std td {
padding-top: 1px;
padding-bottom: 1px;
}
The problem is the height of the cells.... isnt equal in all browsers...
any solution?
I found why...
The solution is to set vertical align to middle otherwise
Before doing any css changes, set margin and padding to 0 then change if needed. Also set line-height to 1em.
Related
fieldset {
width: 510px;
border-width: 1px;
border-color: black;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 2em;
}
*:not(.menu)(fieldset) {
margin: 1;
padding: 1;
}
<form>
<fieldset>
<legend style="font-weight: bold">
Persoonsgegevens
</legend>
<table>
<tr>
<td class="td1"><label for="Voorletters">Voorletters</label></td>
<td class="td2"><input name="Voorletters" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Achternaam">Achternaam</label></td>
<td class="td2"><input name="Achternaam" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Huisnummer">Huisnummer</label></td>
<td class="td2"><input name="Huisnummer" type="number" /></td>
<tr>
<tr>
<td class="td1"><label for="Postcode">Postcode</label></td>
<td class="td2"><input name="Postcode" type="text" pattern="^[1-9]{4}[A-Z]{2}" title="Postcode: 1234AA" placeholder="Format: 1234AA" /></td>
</tr>
</table>
</fieldset>
</form>
I'm learning HTML/CSS and working on a form to learn the syntax.
In the form I have a multiple fields like input type="text" input type="number" and type="text" with pattern.
The width of the number and text with pattern fields is smaller then the width of the regular text fields. I've investigated this and solved this by adding the following CSS code:
*:not(.menu){
Margin: 1;
padding: 0;
}
That worked fine but I'm using a fieldset in which I want to set the padding with the following code:
fieldset {
width: 510px;
border-width: 1px;
border-color: black;
padding-left:1em;
padding-right: 1em;
padding-bottom: 2em;
}
This code does not work unless I change the previous code to:
*:not(.menu)(fieldset)
margin: 1;
padding: 1;
}
but then the text field with pattern and number field aren't the same size as the regular text field anymore.
Anybody any ideas how to fix this?
You can set the width of all input fields in the css like this:
fieldset {
width: 510px;
border-width: 1px;
border-color: black;
padding-left:1em;
padding-right: 1em;
padding-bottom: 2em;
}
*:not(.menu)(fieldset){
margin: 1;
padding: 1;
}
input {
width:200px; /*<------Set the width here as you desire*/
}
<form>
<fieldset>
<legend style="font-weight: bold"><h3>Persoonsgegevens</h3></legend>
<table>
<tr>
<td class="td1"><label for="Voorletters">Voorletters</lable></td>
<td class="td2"><input name="Voorletters" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Achternaam">Achternaam</lable></td>
<td class="td2"><input name="Achternaam" type="" /></td>
</tr>
<tr>
<td class="td1"><label for="Huisnummer">Huisnummer</lable></td>
<td class="td2"><input name="Huisnummer" type="number" /></td>
<tr>
<tr>
<td class="td1"><label for="Postcode">Postcode</lable></td>
<td class="td2"><input name="Postcode" type="text" pattern="^[1-9]{4}[A-Z]{2}" title="Postcode: 1234AA" placeholder="Format: 1234AA" /></td>
</tr>
</table>
</fieldset>
</form>
Here I made a picture, to show you that they are all the same:
I have a HTML table in which a background color is set on each cell. As a result, the contrast between two bg colors appears as a border. Please refer to accepted solution at
Borders around every cell and table
This is a follow up question.
Now I need to include bootstrap in my application. However, as soon as I include bootstrap CSS the border appearance disappears (even if I don't include any bootstrap class). How can I include bootstrap and still have a border like appearance around each cell.
Here is the fiddle with bootstrap included
https://jsfiddle.net/hqkw4x1s/1/
and below is the original code, without reference to bootstrap css (this gives a border like appearance due to bgcolors)
.lab {
HEIGHT: 18px; FONT-WEIGHT: normal; TEXT-ALIGN: left; PADDING-LEFT: 4px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: #e6f6f6
}
.val {
PADDING-BOTTOM: 1px; PADDING-TOP: 1px; PADDING-LEFT: 2px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: white
}
<FORM>
<DIV>
<TABLE width="100%" bgColor=#cecece border=0 cellSpacing=1 cellPadding=0>
<TBODY>
<TR vAlign=middle>
<TD width="6%" class=lab>Country</TD>
<TD width="44%" class=val>
<INPUT name="A" id="A" type=checkbox CHECKED>
<LABEL for="A">A</LABEL>
<INPUT name="B" id="B" type=checkbox CHECKED>
<LABEL for="B">B</LABEL>
</TD>
<TD width="6%" class=lab>States</TD>
<TD width="44%" class=val>
<TABLE width="100%" border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD>
<SELECT>
<OPTION value="p" selected>P</OPTION>
<OPTION value="q">Q</OPTION>
<OPTION value="r">R</OPTION>
</SELECT>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR vAlign=middle>
<TD class=lab>Ownership</TD>
<TD class=val>
<TABLE width="100%" border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD><TEXTAREA style="WIDTH: 95%" rows=1 cols=20></TEXTAREA></TD>
<TD style="WIDTH: 75px; TEXT-ALIGN: left"><SPAN
style="BACKGROUND-COLOR: #f8f8f8"></SPAN>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD class=lab>Partnership</TD>
<TD class=val><INPUT type=text xHeight="32px"> </TD>
</TR>
<TR vAlign=middle>
<TD class=lab>Accounts Payable</TD>
<TD
style="PADDING-LEFT: 2px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: white">
<INPUT type=text>
</TD>
<TD class=lab>Start Date</TD>
<TD class=val>
<INPUT type=text xHeight="32px">
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</FORM>
Please update below table tag.Here you just need to use the bootstrap standard class to achieve this.
Instead
<table width="100%" bgcolor="#cecece" border="0" cellspacing="1" cellpadding="0">
Should be:
<table class="table table-bordered" width="100%" bgcolor="#cecece" border="0" cellspacing="1" cellpadding="0">
The rest of my page conforms to the container width which would be equal to the top line and the bottom line of this midBodyWrapper but these boxes won't lay out side by side. I'm not sure what's going on but I've tried some inline styles too but nothing works. Please see picture attached. Thank you for your help.
<table id="midBodyWrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="subHeader" width="35%"><br>I Mainly Shop For:
</td>
</tr>
<tr>
<td class="checks2">
<div>
<table cellpadding="0" cellspacing="0">
<tbody><tr valign="middle">
<td></td>
<td></td>
</tr>
</tbody></table>
<input type="checkbox" name="CheckBox.A address.Men's Clothing">Men's Clothing<input type="hidden" name="CheckBox.A address.Men's Clothing" value="off">
</div>
<div>
<table cellpadding="0" cellspacing="0">
<tbody><tr valign="middle">
<td></td>
<td></td>
</tr>
</tbody></table>
<input type="checkbox" name="CheckBox.A address.Women's Clothing">Women's Clothing<input type="hidden" name="CheckBox.A address.Women's Clothing" value="off">
</div>
<div>
<table cellpadding="0" cellspacing="0">
<tbody><tr valign="middle">
<td></td>
<td></td>
</tr>
</tbody></table>
<input type="checkbox" name="CheckBox.A address.Boy's Clothing">Boy's Clothing<input type="hidden" name="CheckBox.A address.Boy's Clothing" value="off">
</div>
</td>
</tr>
</tbody></table>
#midBodyWrapper {
border: 1px solid #bbb;
border-left: 0;
border-right: 0;
padding: 30px 0;
margin: 40px 0;
}
It's also a responsive page so i think for some reason it's stuck in it's responsive smaller squished form. Because this would be how it's suppose to look on mobile, kind of.
To display your elements in one row, you need to apply the following property:
td div {
display: inline-block;
}
or
td div {
float: left;
}
Demo
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'd like my two inputboxes to take up the whole width of my table cell, with no/minimal space between the two inputboxes.
Fiddle: http://jsfiddle.net/Gd47b/2/
#one {
width:20%;
float: left;
}
#two {
width:80%;
display: block;
overflow: hidden;
}
What you're is missing is that the border with 1px will take up some space so you either have to remove the border from the table or adjust the width of the text fields to accommodate.
One option is to just split the cell the inputs are in into two cells like:
<table border="1" bordercolor="e2e2e2" width="400">
<tr>
<td><label>1</label> </td>
<td colspan="2"><input type="text" id="Name" value="Name" /> </td>
</tr>
<tr>
<td>2</td>
<td style="width:20%"><input type="text" id="one" value="one" style="width: 100%" /> </td>
<td style="width:80%"><input type="text" id="two" value="two" style="width: 100%" /></td>
</tr>
</table>
jsFiddle example