I have 2 rows in a HTML table. The first column in the first row spans based on the second column(This is Volvo This is Volvo) in the second row.
I want both the rows spanning independently based on the default value/size.
https://jsfiddle.net/p457mcdx/
HTML code:
<table>
<tr>
<td>
<input type="text" placeholder='firstname'>
</td>
<td>
<input type="text" placeholder='Lastname'>
</td>
</tr>
<tr>
<td>
<select>
<option value="volvo">This is a Volvo This is a Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
</tr>
</table>
You can set a width on the select trough CSS
select{
max-width: 100px; /* or width: 100px */
}
So that it doesn't span table columns.
EDIT: Example
I'm not sure if you want this:
<table>
<tr>
<td>
<input type="text" placeholder='firstname'>
</td>
<td>
<input type="text" placeholder='Lastname'>
</td>
</tr>
<tr>
<td colspan="2">
<select style="width:100%">
<option value="volvo">This is a Volvo This is a Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
</tr>
</table>
If you don't want your select with 100% width, just remove the style attribute
Related
I am trying to update cell 1 of current row with the value from Select.
I know if I change the $(this).closest('tr') with a number, it will affect that row, but it would not trigger for that current row.
function currentrow(number) {
document.getElementById('mytable').rows[$(this).closest('tr')].cells[1].innerHTML = number;
}
<table id="mytable">
<tr>
<td>
<select name="column()" onchange="currentrow(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<select name="column()" onchange="currentrow(this.value)">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
</td>
<td>
2
</td>
</tr>
</table>
I hope following Answers Will help you
function currentrow(element) {
element.parentNode.nextElementSibling.innerHTML = element.value;
}
<table id="mytable">
<tr>
<td>
<select name="column()" onchange="currentrow(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<select name="column()" onchange="currentrow(this)">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
</td>
<td>
2
</td>
</tr>
</table>
Detail View
Here I split above mentioned JS code into multiple line.
function currentrow(element) {
var selectedValue = element.value, // get selected value
parentCell = element.parentNode, // get parent td element
nextTargetCell = parentCell.nextElementSibling; // get next td element
// set next td element value with selected value
nextTargetCell.innerHTML = selectedValue;
}
<table id="mytable">
<tr>
<td>
<select name="column()" onchange="currentrow(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<select name="column()" onchange="currentrow(this)">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
</td>
<td>
2
</td>
</tr>
</table>
I am having to create a contacts list for my team to implement on our website and since there are a large number of contacts, I would like to have only a single table cell with a drop down menu and once clicked, it will populate the other cells next to it with the respected information based on the selection.
I am very new to HTML so I am not even sure how to make the dropdown work.
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" style="text-align:center;">
<thead>
<tr>
<th>Department</th>
<th>Division</th>
<th>Number</th>
<th>CTI</th>
<th>Email</th>
</tr>
</thead>
<tbody style="overflow-y:scroll; height:200px;">
<tr>
<td class="select">
<select>
<option value="department">Department</option>
<option value="saab">Division</option>
<option value="number">Number</option>
<option value="cti">CTI</option>
<option value="email">Email</option>
</select>
</td>
<td class="select">
<select>
<option value="billing">billing</option>
<option value="retention">retention</option>
<option value="sales">sales</option>
<option value="support">support</option>
<option value="management">management</option>
</select>
</td>
<td>
Number
</td>
<td>
CTI
</td>
<td>
Email
</td>
</tr>
</tbody>
</table>
</div>
So far the answer I got below doesn't quite do what I am looking for.
Below I have added a picture of what my table looks like with CSS and I would like to have the first two cells populate the Department and its division. The other cells will populate themselves based on the selections of the first two:
Trying this
<tr>
<td>
<select>
<option value="department-1">Department</option>
<option value="department-2">Department</option>
<option value="department-3">Department</option>
<option value="department-4">Department</option>
<option value="department-5">Department</option>
</select>
</td>
<td>
<select>
<option value="division-1">Division</option>
<option value="division-2">Division</option>
<option value="division-3">Division</option>
<option value="division-4">Division</option>
<option value="division-5">Division</option>
</select>
</td>
</tr>
And just keep adding
I have an element <select> </select> with some <option> </option> in a table row. I want this select to fill all the row space cause some other <input type = "text"> make the row larger than the initial <select> width.
Here is my code to show you the space gap :
<table>
<tr>
<td>
<input type = "text" />
</td>
</tr>
<tr>
<td>
<select>
<option value = "option1" >value 1</option>
<option value = "option2" >value 2</option>
</select>
</td>
</tr>
</table>
If you copy this code you will clearly see the difference between this element. How can I do to make them at the same width please ?
Just add width: 100% to select element:
table tr td select{
width: 100%;
}
<table>
<tr>
<td>
<input type = "text" />
</td>
</tr>
<tr>
<td>
<select>
<option value = "option1" >value 1</option>
<option value = "option2" >value 2</option>
</select>
</td>
</tr>
</table>
In the simplest case, add a width to the select element:
td {
border: 1px dotted blue;
}
select {
width: 100%;
}
<table>
<tr>
<td>
<input type = "text" />
</td>
</tr>
<tr>
<td>
<select>
<option value = "option1" >value 1</option>
<option value = "option2" >value 2</option>
</select>
</td>
</tr>
</table>
Just set the width of <select> to 100% as follows:
*{
margin:0;
padding:0;
}
select{
width:100%;
}
<table>
<tr>
<td>
<input type = "text" />
</td>
</tr>
<tr>
<td>
<select>
<option value = "option1" >value 1</option>
<option value = "option2" >value 2</option>
</select>
</td>
</tr>
</table>
You also can set the element width in css like this:
input, select {
width : 100px;
}
I am trying to add a drop down box in a table as a part of registration form.
Here is my code below :-
<html>
<body></body>
<h1>Cab</h1>
<TABLE BORDER="0">
<TR>
<TD>Name</TD>
<TD ALIGN="left"><INPUT TYPE="text" SIZE="25" NAME="fname">
</TD>
</TR>
<TR>
<TD>Phone Number</TD>
<TD ALIGN="left"><INPUT TYPE="text" SIZE="25" NAME="phnnum">
</TD>
</TR>
<TR>
<TD class = "select">Online Password (Repeated)
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<TD ALIGN="center"></TD>
</TD>
</TR>
</TABLE>
<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Clear">
</html>
When I do this the drop down box doesn't come in a format as the other fields come.
I want the drop down box right below the Text Field above it.
its because you have put "Online Password (Repeated)" text and drop down in a same column td
and the second TD is blank..
<TR>
<TD class = "select">Online Password (Repeated)
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<TD ALIGN="center"></TD>
</TD>
</TR>
replace above code with below
<TR>
<TD class = "select">Online Password (Repeated)
</TD>
<TD ALIGN="center">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</TD>
</TR>
I hope u can now find where u made mistake
check the jsfiddle
<html>
<body>
<h1>Cab</h1>
<TABLE BORDER="0">
<TR>
<TD>Name</TD>
<TD ALIGN="left">
<INPUT TYPE="text" SIZE="25" NAME="fname">
</TD>
</TR>
<TR>
<TD>Phone Number</TD>
<TD ALIGN="left">
<INPUT TYPE="text" SIZE="25" NAME="phnnum">
</TD>
</TR>
<TR>
<TD>Online Password (Repeated)</TD>
<TD ALIGN="left">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</TD>
</TR>
</TABLE>
<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Clear">
</body>
</html>
I have a table with 3 rows.
I decided to split each row into 4 columns even though the most TDs a row will have is two.
So, the top row with one TD, has a colspan of 4.
the next row has two TDs, the first with a colspan of 1, the second with a colspan of 3.
the third row has two TDs, each with a colspan of 2.
here is the HTML:
<table class="img">
<tbody>
<tr>
<td colspan="4" class="ttBtn"><hr></td>
</tr>
<tr>
<td colspan='1'>
<select id="moveShifts">
<option val="1">1st Shift</option>
<option val="2">2nd Shift</option>
<option selected="" val="3">3rd Shift</option>
</select>
</td>
<td colspan='3' style='display:block' dept="3">
<select id="moveDepts">
<option val="139">CO-MAIL 1</option>
<option val="140">CO-MAIL 2</option>
<option val="599">FORKLIFT</option>
<option val="665">LEAD TEMP</option>
<option selected="" val="666">OPERATOR</option>
<option val="16">PAMS-CTLMAIL</option>
<option val="463">PAMS-CTLMAIL GEN LAB ** DO NOT USE **</option>
<option val="141">PAMS-CTLPAL</option>
<option val="540">POLY BAG</option>
<option val="485">RECEIVING</option>
</select>
</td>
</tr>
<tr>
<td colspan='2'>
<input type="button" value="Update Punch Record" class="ttBtn" disabled='true' id="ttUpd">
</td>
<td colspan='2'>
<input type="button" value="Delete Punch Record" class="ttBtn" id="ttDel">
</td>
</tr>
</tbody>
</table>
It looks like the second button on the bottom row won't shift left any closer the the right end of the select element above it.
Can anyone tell me what I need to do to fix this?
Here is a link to the code on JSFiddle - http://jsfiddle.net/Joth/TdVAd/2/
Thanks!
Try this below code...
<tr>
<td colspan='4'>
<input type="button" value="Update Punch Record" class="ttBtn" disabled='true' id="ttUpd">
<input type="button" value="Delete Punch Record" class="ttBtn" id="ttDel">
</td>
</tr>
The main problem is 'display:block;' in TD element (if you add border to table, you show it):
<td colspan="3" style='display:table-cell' dept="3">
You can use tag COLGROUP and set width at tag COL, for example:
<table class="img">
<colgroup><col width="25%" /><col width="25%" /><col width="25%" /><col width="25%" /></colgroup>
live demo: http://jsfiddle.net/Magicianred/T9Ru5/4/
Enjoy your code