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>
Related
How to get rid of left space so that text remains right aligned ? Unnecessary space is marked red in picture.
Fiddle: https://jsfiddle.net/ta2vzuta/
<table style="width: 100%">
<tr>
<td class="labels"> some text here </td>
<td> input field </td>
<td class="labels"> some text here </td>
<td> input field </td>
</tr>
<tr>
<td class="labels"> text </td>
<td> input field here </td>
<td class="labels"> text here </td>
<td> input field </td>
</tr>
</table>
EDIT: Is it possible that the <td class=labels> will be adjusted to text length ? So that you don't need to set the fixed length ?
In table cells, the width property only specifies a preferred width. But if you use the default automatic table layout, the cells will grow to be at least the minimum width required by the contents.
So you can use
.labels {
width: 0; /* As narrow as possible */
white-space: nowrap; /* Without inserting line breaks */
}
.labels {
text-align: right;
font-weight: bold;
width: 0;
white-space: nowrap;
}
<table style="width: 100%">
<tr>
<td class="labels"> some text here </td>
<td> input field </td>
<td class="labels"> some text here </td>
<td> input field </td>
</tr>
<tr>
<td class="labels"> text </td>
<td> input field here </td>
<td class="labels"> text here </td>
<td> input field </td>
</tr>
</table>
use a combination of width:50% on td and width:auto on .label
like this:
https://jsfiddle.net/grassog/udhwh388/2/
i am designing a webpage which includes two tables.here is my code
<div>
<table style="width: 50%; height: 377px;">
<tr>
<td rowspan="4"><EMBED style="margin-left:20px" SRC="nesaranodu.mp4" WIDTH="500px" HEIGHT="400px" AUTOPLAY="FALSE" LOOP="false"></EMBED> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table style="width: 50%; height: 377px;display:inline-block;">
<tr>
<td> </td>
<td> </td>
<td align="right" style="padding:0px;color:white" >mobile number:</td>
<td><input name="Text1" type="text" /><h3 style="color:red;"><?php echo $mnoerr;?></h3>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align="right" style="padding:0px;color:white">password</td>
<td><input name="Text2" type="password" /><h3 style="color:red;"><?php echo $passerr;?></h3>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td></td>
<td ><input name="Submit1" type="submit" value="change address" />
<input onclick="document.location.href='regforswa.php'" name="Submit2" type="button" value="register" /><br/>
forgot password<h3 style="color:red;"><?php echo $success;?></h3></td>
</tr>
</table>
</div>
and i want to display it side by side.i used display:inline-block property but it is not working fine.please suggest me what i have to do.
http://jsfiddle.net/CHC67/
<div class=left>
//First table
</div>
<div class=right>
//Second table
</div>
<style>
.left {
width:50%;
float: left;
}
.right {
width 50%;
float: left;
}
</style>
Should really be doing this with divs rather than tables.
Try using floats on both tables:
<table style="width: 50%; height: 377px; float:left;">
Please make sure to set the width on the EMBED accordingly..
Otherwise it will grow over the 50% depending on the display size..
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
I have the following for Google Chrome:
<table>
<tr>
<td width="80px">
Text
<td width="100%">
<form>
<input style="width:100%" type="text"/>
<button>Submit</button>
</form>
</td>
<td width="80px">
Text
</td>
</tr>
</table>
The problem is when you resize the screen to something small, the Submit button wraps around under the textbox. How do I keep the "button" from wrapping (as in the button shows up below the textbox by a few pixels), while keeping the text box as wide as possible?
http://jsfiddle.net/N36a7/
<form>
<table>
<tr>
<td width="80px">Text</td>
<td width="100%">
<input style="width:100%" type="text"/>
</td>
<td>
<button>Submit</button>
</td>
<td width="80px">Text</td>
</tr>
</table>
</form>
Just give the button it's own td.
First, add the following styles to the form to prevent it from wrapping:
form{
white-space: nowrap;
}
Then remove the style width=100% from the input, which causes it to occupy all of the horizontal space within the td.
JS Fiddle: http://jsfiddle.net/B4eWz/
Given this example, try making your window smaller such that the size of the example is squished.
div {
padding: 1em;
background: #2424c6
}
table {
width: 100%;
}
input {
width: 150px;
}
<div>
<table>
<tr>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
</div>
You will note that the textboxes (correctly) do not wrap to new lines as they are in individual <td>s.
However, the containing div, as denoted by the blue colour, does not completely wrap the table.
How can I make the containing div fully contain the child table?
Add display:table to the wrapping div.
div {
padding: 1em;
background: #2424c6;
display: table;
}
table {
width: 100%;
}
input {
width: 150px;
}
<div>
<table>
<tr>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
</tr>
</table>
</div>