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
Related
I have been tasked with maintaining someone else's code. In this fiddle, I have captured a snippet of an html file from this codebase
https://jsfiddle.net/hqkw4x1s/
.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>
The thing that I am not able to get my head around is the border around each cell and the table. Neither in the CSS, nor in the HTML there is any reference to border style, so how come borders are displayed around each cell.
I tried using developer tools as well. It shows me the following CSS class with reference to border. But where is it coming from?
You have to decide whether you want to style inline or using CSS.That will make it easier to correct and fix errors.
It seems that is not a border. It's a background color. The contrast between two bg colors appears as a border. The CSS assigns a background color to every cell. Hence, the outer surrounding of the cell will remain gray making it look like a border.
The code in HTML gives a bg color to the table and from CSS it gives bg color to cells. The little space between each cell will show the tables bg color, which is nearly gray, leading the viewer to think it's border.
For example, by removing the following two lines from CSS:
BACKGROUND-COLOR: #e6f6f6
BACKGROUND-COLOR: white
This line from the Table tag:
bgColor=#cecece
Will render:
After you remove all background colors, add them back one by one based on what you need.
Also be aware of the inline styling I noticed in one of the spans such as:
<span style="BACKGROUND-COLOR: #f8f8f8" >
You need a new css property for tables:
"border-collapse".
table {
border-collapse: collapse;
}
It appears that it is not a border, but background of the table, coming through the gaps between cells, because of these attributes:
bgColor=#cecece ... cellSpacing=1
(bgColor makes light gray background, cellSpacing makes 1px wide gaps between cells). Cells have white background (set with CSS, via .lab and .val classes), but space between them has a background of the table itself, set via bgColor attribute.
I have a table with one row and two cells. I would like to get an input text field to be as wide as possible. How could do it that way?
( 0 )Text, text, text...
The main problem is that the width of the text input box is too much.
Here is the code:
<table style="width:400px">
<tr>
<td style="width:200px">
(<input type="text" name="num" value="0" class="kentta" />)
</td>
<td style="width:200px">
Text, text, text...
</td>
</tr>
</table>
And CSS code:
.kentta {
width: 100%;
padding: 1px;
border: none;
box-sizing: content-box;
height: 18px;
vertical-align: middle;
text-align: center;
line-height: 18px;
}
Instead of pixels, you can achieve it by using percentage of the width.
As give below
<table style="width:100%">
<tr> This will grow as large as.
<td style="width:80%"> <----'
<input type="text" name="num" value="0" style="border:none;text-align:center" />
</td>
<td style="width:20%">
Text, text, text...
</td>
</tr>
</table>
It is maximum for any table data.Use this on browser on 100% width.
<table style="width:100%">
<tr>
<td>
(<input type="text" name="num" value="0" style="border:none;text-align:center;width:98%;" />)
</td>
<td>
Text, text, text...
</td>
</tr>
How do i align the iframe elements that's inside the table cell along with the rest of the table cells inside the table so that it appears in the same way if it were a td element. ?
I tried to align by adding inline style position:relative; top:-4px to the iframe element.
<iframe src="Static/Pan.htm" frameborder="0" scrolling="no" width="190" height="30" style="width: 190px;height: 30px; display:table-cell; position:relative; top:-4px"></iframe>
I don't think this is the right way. Are there any alternative ways to align it?
Main Html
<table id="mytable">
<tr>
<td>Name
</td>
<td>Phone Number
</td>
<td>Address
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<iframe src="Address.htm" frameborder="0" scrolling="no" width="190" height="30" style="width: 190px;height: 30px; display:table-cell;"></iframe>
</td>
<td>
<input type="text" />
</td>
<td>
<input type="button" value="update" />
</td>
</tr>
</table>
Iframe Address.htm
<html>
<body>
<div>
<input type="text" />
</div>
</body>
</html>
This is the actual output:
This is the intended output:
Target the desired cells like this :
td {
vertical-align: top;
}
This will align the content of your cell to the top of the cell.
Here is my code:
<form name="htmlform" method="post" action="html_form_send.php">
<div id="table">
<table width="400px" style="margin-top: 50px; margin-left: 20px; color: #FFF">
</tr>
<tr>
<td valign="top">
<label for="name">Name *</label>
</td>
<td valign="top">
<input type="text" name="name" maxlength="50" size="30" style="margin-bottom: 10px">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30" style="margin-bottom: 10px">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30" style="margin-bottom: 10px">
</td>
</tr>
<tr>
<td valign="top">
<label for="enquiry">Enquiry *</label>
</td>
<td valign="top">
<textarea name="enquiry" maxlength="1000" cols="32" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</div>
</form>
And i want to make the table and all its features smaller when viewed below 480px wide for small devices phones/etc. I don't know what to reference when using a media query:
#media only screen and (max-width: 480px) {
#table {
width: 100px;
}
This css above doesn't work, it resizes the div but the content is still original size even if i put the form in the div it still doesn't work, perhaps the div is not required anyway... any help would receive major kudos!!
Thanks!
You need to do a few things to make this work.
First, that outer div isn't required so we can get rid of it.
Second, you need to change the width of your table in the media query. I used a percentage value (for responsiveness) but you can set it to a pixel value if you desire (under 480px of course)
Third, you need to set a width in your media query for the inputs/textarea. Without this, they will take up the widths specified in the 'size' attribute and will cause the horizontal scroll bar to appear.
Here's the media query I used:
#media only screen and (max-width: 480px) {
table {
width:95%;
}
input[type=text], textarea {
width:75%;
}
}
Demo: http://jsfiddle.net/hABGX/2/
it doesn't work because your table has a style to, and that style is syaing the table has a width of 400px. Try to put this:
<table style="margin-top: 50px; margin-left: 20px; color: #FFF; width:100%">
instead of this:
<table width="400px" style="margin-top: 50px; margin-left: 20px; color: #FFF">
it wont work very well because you still have enought content to show in 100px...so i recomend you change the size to about 250px. If you really want it to have 100px i recomend you make the table in a diferent way.
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.