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?
Related
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;
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 am writing my final project at PHP and JS. I need help with the html and CSS styling.
This is my sign form, I want help in 2 things.
I want to do that the whole row (tr) that include th while be with border, now I know to do it only that every th have border.
I want to divide the table to sections and to style every section in other CSS code.
How can I do it?
This my HTML code:
<body>
<form>
<table id="t">
<tr>
<th>Basic info</th>
<th>Contact info</th>
<th>About me</th>
</tr>
<tr>
<td><input placeholder="First name"></td>
<td><input placeholder="Phone"></td>
<td rowspan="3"><textarea rows="8" placeholder="About me"></textarea></td>
</tr>
<tr>
<td><input placeholder="Last name"></td>
<td><input placeholder="Area"></td>
</tr>
<tr>
<td><input placeholder="Degree"></td>
<td><input placeholder="Email"></td>
</tr>
<tr><th colspan="2">Social networks</th></tr>
<tr>
<td><input row placeholder="Facebook link"></td>
<td><input row placeholder="Website link"></td>
</tr>
<tr>
<td><input row placeholder="Twitter link"></td>
<td><input row placeholder="Medium link"></td>
</tr>
<tr>
<td><input row placeholder="Instagram link"></td>
<td><input row placeholder="Google link"></td>
</tr>
<tr><td colspan="2"><button type="submit">שלח</button></td></tr>
</table>
</form>
</body>
This is my CSS:
table{
margin: 16px;
text-align: center;
}
td{
padding: 10px;
justify-content: space-between;
}
#t textarea{
width: 100%;
height: 100%;
}
tr>th{
margin-top: 10px;
border: 1px solid red;
}
For (1), tr's can only have borders when the table is border-collapse:collapse.
For (2), you can put rows in <thead>, <tbody>, <tfoot> sections and style those separately.
Maybe you can have multiple <tbody> sections and use nth-of-type to select them but I don't know.
Differences in the below
addition of thead, tbody, tfoot in the html
style tbody as an example
border-collapse:collapse on the table style
tr style on the first tr
table {
margin: 16px;
text-align: center;
border-collapse: collapse;
}
td {
padding: 10px;
justify-content: space-between;
}
#t textarea {
width: 100%;
height: 100%;
}
tbody {
font-style: italic;
}
<form>
<table id="t">
<thead>
<tr style="border:solid 1px">
<th>Basic info</th>
<th>Contact info</th>
<th>About me</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input placeholder="First name">
</td>
<td>
<input placeholder="Phone">
</td>
<td rowspan="3">
<textarea rows="8" placeholder="About me"></textarea>
</td>
</tr>
<tr>
<td>
<input placeholder="Last name">
</td>
<td>
<input placeholder="Area">
</td>
</tr>
<tr>
<td>
<input placeholder="Degree">
</td>
<td>
<input placeholder="Email">
</td>
</tr>
<tr>
<th colspan="2">Social networks</th>
</tr>
<tr>
<td>
<input row placeholder="Facebook link">
</td>
<td>
<input row placeholder="Website link">
</td>
</tr>
<tr>
<td>
<input row placeholder="Twitter link">
</td>
<td>
<input row placeholder="Medium link">
</td>
</tr>
<tr>
<td>
<input row placeholder="Instagram link">
</td>
<td>
<input row placeholder="Google link">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button type="submit">שלח</button>
</td>
</tr>
</tfoot>
</table>
</form>
I am very new to Bootstrap css, can any one help me to design table header like this, column is seperated by pipe like css
Below is css .
<style>
.table-bordered tbody tr td {
border: none !important;
}
.table-bordered tbody tr td input.form-control[type=text] {
border-radius: 0px !important;
}
#input_container {
position: relative;
direction: rtl;
}
#input_img {
position: absolute;
bottom: 4px;
right: 5px;
width: 24px;
height: 24px;
}
Here i have used "table table-bordered" class for table and using above css i have removed td border lines
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Product Name</th>
<th>Color/Size</th>
<th>Qty. Needed</th>
<th>Need By Date</th>
<th>Special Instructions</th>
<th>Art Files</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<div id="input_container">
<input class="form-control" type="text" id="input" value="">
<img src="~/Images/calendarImg.png" id="input_img">
</div>
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<input class="form-control" type="text" />
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td><input class="form-control" id="Text1" type="text" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6"><a>Add Rows</a></td>
</tr>
</tfoot>
</table>
I have created a demo for you. Take help and modify as per your requirement.
<table frame="box" rules="none" cellpadding="2" cellspasing="5"> <tr style="background-color:yellow; ">
<td colspan="4">
<table style="width:100%">
<tr>
<td style="width:25%;border-right: thin solid #000;">First</td>
<td style="width:25%;text-align:center; border-right: 1px solid #000;">Second</td>
<td style="width:25%;text-align:center;border-right: 1px solid #000;">Third</td>
<td style="width:25%;text-align:center;">Fourth</td>
</tr>
</table>
</td> </tr> <tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr> </tr> </table>
click here to see it in fiddle
I am trying to create a table in which the border will appear like a login box.
<table border="1">
<tr>
<td>Username: </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td><input type="submit" value="Log In" /></td>
</tr>
</table>
What happens is that even the table cells have border and the border sucks. I want to remove cell border. The border should only be wrapping around the table. I am totally new to this.
Thanks in advance.
Use CSS
<style type="text/css">
.loginbox {
border-collapse: collapse;
border-width: 1px;
border-style: solid
}
</style>
<table class="loginbox">
<tr>
<td>Username: </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Log In" /></td>
</tr>
</table>
FYI: I added colspan="2" to your last <td> in order to make the border go all the way around.
If you use the following css,
table {
border: thin solid black;
}
that will give you a border around the table only, you can see a jsfiddle for it at http://jsfiddle.net/2CdwW/
Use CSS to put the border on the table instead:
<table style="border: 1px solid black">
<tr>
<td>Username: </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Log In" /></td>
</tr>
</table>