I'm trying to accomplish the following:
However when I set the width of the td it never seems to change and I can only get it lo align to the length of the longest field like it is below:
What can I do to achieve the same results as with the image above?
Here is my code:
<table>
<tr>
<td class="no-wrap">Via (Jr, Av, Calle, Pje, Etc.):</td>
<td class="send-right"><input type="text" size="5"></td>
<td>Nombre Via:</td>
<td><input type="text" size="25"></td>
<td>Nro: <input type="text" size="5"></td>
<td>Interior: <input type="text" size="7"></td>
</tr>
<tr>
<td>Tipo Zona</td>
<td class="send-right"><input type="text" size="10"></td>
<td>Nombre Zona:</td>
<td><input type="text" size="20"></td>
<td>Referencia:</td>
<td><input type="text" size="18"></td>
</tr>
<tr>
<td>Departamento</td>
<td class="send-right"><input type="text" size="15"></td>
<td>Provincia:</td>
<td><input type="text" size="20"></td>
<td>Distrito:</td>
<td><input type="text" size="18"></td>
</tr>
</table>
.send-right {
text-align: right;
vertical-align: middle;
}
.no-wrap {
white-space: nowrap;
}
You were almost there! You wrote text-align: right; when it should've been text-align: end;
Related
I want to figure out this as why the size of my table changes unexpectedly when colspan is applied to one of the cells as indicated by the content of the textbox below:
td {
border: 1px solid navy;
}
table {
margin-left: auto;
margin-right: auto;
font-family: arial;
color: #fff5cc;
margin-top: 100px;
background-color: red;
}
<form method="post" action="" onsubmit="return ValidateForm()">
<table border="1" id="tbl">
<tr>
<td colspan="2">Registration No:</td>
<td colspan="2"><input type="text" name="mid" id="mid" class="txtBx" value="" readonly/></td>
</tr>
<tr>
<td>Payable Month(s):</td>
<td><input type="text" id="" class="txtBx" /></td>
<td>Days(s):</td>
<td><input type="text" id="" class="txtBx" /></td>
</tr>
<tr>
<td colspan="2">Arrears(Rs):</td>
<td><input type="text" id="arrear" class="txtBx" /></td>
</tr>
<tr>
<td><input type="submit" name="sbmit" id="sbmit" value="Confirm" /></td>
</tr>
</table>
</form>
But, when I apply colspan, it becomes like:
Change made to the code:
<tr>
<td colspan="2">Arrears(Rs):</td>
<td colspan="2"><input type="text" id="arrear" class="txtBx" /></td>
</tr>
Why does the cell containing Days(s) shrink and the width of the table decreases?
I have a html table
If Production Profit % between:
<table id="tableDataInp">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
</table>
How can I give a % sign at the end of each row? I tried using % sign after each but %is displayed at the top of table.
https://www.screencast.com/t/hZ9gebf1m Current Output
Expected Output : https://www.screencast.com/t/7OSfvlMgV5x % should be displayed in place of Red Square.
You could do it using CSS and an after element.
table td:last-child::after {
content: '%';
}
<table id="tableDataInp">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
</table>
So the CSS selector selects the last td in each row and adds an after element with the content of %
You can then apply further styling to the after element (margin, font size etc).
Add after pseudo property
#tableDataInp tr:after{
content:"%";
color:#fff;
width:20px;
height:20px;
border-radius:5px;
background:red;
padding:3px;
}
https://jsfiddle.net/lalji1051/s25cvyda/2/
You could simply add an extra cell per row:
<table id="tableDataInp">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td width="30">%</td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td width="30">%</td>
</tr>
</table>
I'm trying to align a text input to the right of a table td but with no results. Here's what i have:
.right {
text-align: right;
}
<table width="100%">
<tr>
<td width="50%"><input type="text" name="nome" id="nome" placeholder="Nome" /></td>
<td class="right"><input type="text" name="email" id="email" placeholder="Email" /></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="msg" id="msg" placeholder="Mensagem" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="sendform" value="Enviar">
</td>
</tr>
</table>
The second <input> is right aligned inside the <td>.
But the <input> also happens to be just as wide as the <td>.
Run this to see what happens after forcing the <td> a bit wider, and the <input> a bit narrower. (I also added borders to make the effect more visible)
td {
border: 1px solid black;
width: 100px;
}
input[type="text"] {
width: 60px;
}
.right {
text-align: right;
}
<table>
<tr>
<td width="50%"><input type="text" name="nome" id="nome" placeholder="Nome" /></td>
<td class="right"><input type="text" name="email" id="email" placeholder="Email" /></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="msg" id="msg" placeholder="Mensagem" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="sendform" value="Enviar">
</td>
</tr>
</table>
I would like to show a form with submit button, to post the texts fields back to server with:
a text input called title, with border
text called chapter and section no border, and their should be assigned in JavaScript
I want chapter/section not modifiable and short. But Title is a normal input and should be very close to the word Title, like:
Chapter 3 Section 4
_____________
Title |_____________|
I wrote CSS like "input[type="notext"]{border: none} then either both text inputs have border, or none has border. I basically want the two inputs to have different style, or some other kind of field for chapter/section for me to set value is fine too. So how to achieve this? Don't need to be compatible for IE8 and before.
input[type="text"]{
border: none;
font-size: 16px;
}
<form action="#" method="post" id="form" >
<table>
<tr>
<td>Chapter<input type="text" value="3" name="cha_n" readonly/></td>
<td>Section <input type="text" value="4" name="sec" readonly/></td>
</tr>
<tr>
<td>Title </td>
<td><input type="text" style="inputtext" name="title" id="title"/></td>
</tr>
<tr>
<td span='2'><a id="submit" href="javascript: check()">Send</a></td>
</tr>
</table>
</form>
You can define a CSS class for your inputs and just use them.
For inputs with class example:
input.example {
border: none;
font-size: 16px;
}
Use it like this:
<input class="example" type="text" value="3" name="cha_n" readonly/>
Example: http://jsfiddle.net/x762v24a/
A less generic way to achieve this is to use CSS attribute selector:
input[name="cha_n"] {
border: none;
}
To remove the borders on the chapter and section inputs, use:
input[readonly] {
border:none;
}
<form action="#" method="post" id="form" >
<table>
<tr>
<td>Chapter<input type="text" value="3" name="cha_n" readonly/></td>
<td>Section <input type="text" value="4" name="sec" readonly/></td>
</tr>
<tr>
<td>Title </td>
<td><input type="text" style="inputtext" name="title" id="title"/></td>
</tr>
<tr>
<td span='2'><a id="submit" href="javascript: check()">Send</a></td>
</tr>
</table>
</form>
Try to give inputs having the same style an 'class' attribute,then :
.style1
{
border = 0px solid #FFFFFF;
}
.style2
{
margin = 0px;
padding = 0px;
border = 1px;
}
<form action="#" method="post" id="form" >
<table>
<tr>
<td>Chapter<input type="text" value="3" name="cha_n" class="style1" readonly/></td>
<td>Section <input type="text" value="4" name="sec" class="style1" readonly/></td>
</tr>
<tr>
<td>Title </td>
<td><input type="text" style="inputtext" class="style2" name="title"id="title"/></td>
</tr>
<tr>
<td span='2'><a id="submit" href="javascript: check()">Send</a></td>
</tr>
</table>
<form action="#" method="post" id="form" >
<table>
<tr>
<td>Chapter<input type="text" value="3" name="cha_n" /></td>
<td>Section <input type="text" value="4" name="sec" /></td>
</tr>
<tr>
<td>Title</td>
<td><input type="text" style="border:none;font-size:14px;" name="title"/></td>
</tr>
<tr>
<td span='2'><a id="submit" href="javascript: check()">Send</a></td>
</tr>
</table>
</form>
I'm going to put a div inside a table tag but it doesn't work.
<table>
<div id="account" style="border: 1px solid red;">
<tr>
<td>ایمیل قبلی:</td>
<td><input type="text" name="oldmail" /></td>
<td>ایمیل جدید:</td>
<td><input type="text" name="newmail" /></td>
<td>ایمیل تایید:</td>
<td><input type="text" name="newmail2" /></td>
</tr>
<tr>
<td>پسورد قبلی:</td>
<td><input type="text" name="oldpass" /></td>
<td>پسورد جدید:</td>
<td><input type="text" name="newpass" /></td>
<td>پسورد تایید:</td>
<td><input type="text" name="newpass2" /></td>
</tr>
</div>
</table>
http://jsfiddle.net/uJSuR/
How can I fix it?
http://jsfiddle.net/uJSuR/1/
<table id="account" style="border: 1px solid red;">
<tr>
<td>ایمیل قبلی:</td>
<td><input type="text" name="oldmail" /></td>
<td>ایمیل جدید:</td>
<td><input type="text" name="newmail" /></td>
<td>ایمیل تایید:</td>
<td><input type="text" name="newmail2" /></td>
</tr>
<tr>
<td>پسورد قبلی:</td>
<td><input type="text" name="oldpass" /></td>
<td>پسورد جدید:</td>
<td><input type="text" name="newpass" /></td>
<td>پسورد تایید:</td>
<td><input type="text" name="newpass2" /></td>
</tr>
</table>
or put your styles on the tr, It's a little unclear on what you're trying to accomplish.
tr {
border: 1px solid red;
}
You could use The CSS table model
Here are the equivalent Html elements to css properties (from the above w3.org link)
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
Actually after some searches I knew I should change div tag to tbody tag.
thank you for your answers.
You might want something like this:
<table>
<tr id="account" style="border: 1px solid red;">
<td>
<table>
<tr>
<td>ایمیل قبلی:</td>
<td><input type="text" name="oldmail" /></td>
<td>ایمیل جدید:</td>
<td><input type="text" name="newmail" /></td>
<td>ایمیل تایید:</td>
<td><input type="text" name="newmail2" /></td>
</tr>
<tr>
<td>پسورد قبلی:</td>
<td><input type="text" name="oldpass" /></td>
<td>پسورد جدید:</td>
<td><input type="text" name="newpass" /></td>
<td>پسورد تایید:</td>
<td><input type="text" name="newpass2" /></td>
</tr>
</table>
</td>
</tr>
</table>