I have a table in bootstrap 3
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>
Can I make the input fields look like normal cells? I want the input fields to fill out the entire cells (without no input margin nor table cell padding). Just like an Excel spreadsheet where I have many cells and can write in each of them.
Yup. Do it this way:
input {display: block; padding: 0; margin: 0; border: 0; width: 100%;}
td {margin: 0; padding: 0;}
Fiddle: http://jsbin.com/biqomurafage/1
You could also try using contentEditable tables like this: DEMO
<table>
<tbody>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<th>1</th>
<td><span id="A1" contenteditable>#####</span></td>
<td><span id="B1" contenteditable></span></td>
<td><span id="C1" contenteditable></span></td>
</tr>
<tr>
<th>2</th>
<td><span id="A2" contenteditable></span></td>
<td><span id="B2" contenteditable></span></td>
<td><span id="C2" contenteditable></span></td>
</tr>
</tbody>
</table>
span {
width: 100%;
display: block;
}
*note, the content editable spans are required for IE to handle the contentEditable attributes correctly. Reference
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 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 have a table (using Bootstrap 3.0) with an input field in each cell
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table id="itemTable" border="1" class="table table-bordered table-striped">
<thead>
<tr>
<th >Quantity</th>
<th>Unit</th>
<th>Material Name</th>
<th>PO Vatable</th>
<th>PO TAX</th>
<th>PO Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="number" min="1" class="form-control" name="Quan[]">
</td>
<td>
<select id="BX_gender" name="Unit[]">
<option>Kg</option>
<option>Piece</option>
<option>Meter</option>
<option>Pound</option>
<option>Gram</option>
<option>Feet</option>
</select>
</td>
<td><input type="text" name="Material[]"> </td>
<td><input type="number" step="0.01" class="small" name="POVATABLE[]"> </td>
<td><input type="number" step="0.01" class="small" name="POTAX[]"> </td>
<td><input type="number" step="0.01" class="small" name="POTOTAL[]" onkeyup="onRequestTotalModification(this.parentNode.parentNode.rowIndex)"> </td>
</tr>
</tbody>
</table>
I'm trying to set the input to have the width & height of the cell containing it, but nothing is working (even inline styling).
I organized the table using thead and tbody tags, but it didn't fix anything
If you're trying to have your input be the entire cell you need to remove bootstraps default padding on TD elements.
https://jsfiddle.net/2ay5yuq3/2/
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{
padding:0;
}
I'm trying to get a scroll working on my page. When I add overflow-y: scroll. it makes the content inside the div section completely disappear.
The CSS I currently have in for the div section is: overflow-y: scroll, height: 100%. Am I missing something?
<div id = "section">
<div id = "map">
<h1 align = "center">Find Us!</h1>
<div id = "map-canvas"></div>
<p>
</p>
</div>
<div id = "form">
<form method="post" action="mailto: jbloggs#ait.ie">
<fieldset>
<h1 align="center">Contact Us</h1>
<table class="contacttable">
<tr align="left" valign="middle">
<td>First Name</td>
<td><input type="text" name="firstname"/></td>
</tr>
<tr align="left" valign="middle">
<td>Surname</td>
<td><input type="text" name="lastname"/></td>
</tr>
<tr>
<td>Address Line 1</td>
<td><input type="text" name="addressline1"/></td>
</tr>
<tr>
<td>Address Line 2</td>
<td><input type="text" name="addressline2"/></td>
</tr>
<tr>
<td>Town</td>
<td><input type="text" name="town"/></td>
</tr>
<tr>
<td>County</td>
<td><input type="text" name="county"/></td>
</tr>
<tr align="left" valign="middle">
<td><input type="radio" name="sex" value="male"/>Male</td>
<td><input type="radio" name="sex" value="female"/>Female</td>
</tr>
<tr>
<td>Date of Birth</td>
<td><input type="text" name="dob"/></td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
#section {
max-height: 150px; /*add height as you want*/
overflow-y: auto;
}
Go through this http://www.w3schools.com/cssref/pr_pos_overflow.asp
Is there a way to set vertical scrollbar for a div?
This might helps you :)
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>