I am facing problem to align the checkbox in the table cell
<table style="empty-cells:hide;" border="1" cellpadding="1" cellspacing="1">
<tr>
<td valign="top">
test 1 -
<input type="checkbox" name="query_myTextEditBox">
test 2 -
myTextEditBox
<select size ="3" name="myTextEditBox_compare_operator">
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</td>
<td valign="top">
<input type="text" value="my text" name="myTextEditBox">
</td>
</tr>
my test on jsfiddle.net
for some specific reason, I don't want to separate text & checkbox into 2 cells
I did see this post How to center a checkbox in a table cell? but it doesn't work for me.
Add style="vertical-align:top" to the <select> element.
Related
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 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
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
I want to make phone no. field into the form. The user should select the area code from dropdown box and just right to the drop down box their should be text box to enter the phone no. I want to use dropdown box and textbox into single tag. When I try this it send automatically the second field ie textbox into second line by putting tag automatically. When I use two textbox or two dropdown box then it works fine into single tag.
I want to use one dropdown box and one textbox into single tag.
Or are there any other method we can do this.
Please find the code I am using.
<table>
<tbody>
<tr>
<td><label>Name:</label></td>
<td><input type="text" name="bftpro_name"/></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td><label>Phone No:</label></td>
<td><select id="countries" style="width: 50%; name="countries">
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
<input type="text" style="width: 50%; name="field_2" value=""/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Download"/></td>
</tr>
</tbody>
</table>
<input type="hidden" name="bftpro_subscribe" value="1"/>
<input type="hidden" name="list_id" value="2"/>
</form>
You should put them into separate <td>
<td><label>Phone No:</label></td>
<td><select id="countries" style="width: 50%; name="countries">
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
</td>
<td><input type="text" style="width: 50%; name="field_2" value=""/></td>
I'm trying to display two tables inside a container div and it works perfectly in Firefox, and does exactly what I am expecting, but in IE it shifts my second table to appear outside my div. Anyone got any ideas what the issue is that I am running into here? If I put either table in by itself there is no problem, but when I add the second table, regardless of which one come first, I get the problem.
Code for tables:
<div id="contentContainer" style="border: 1px solid black;">
<table id="filterPostingsTable" align="Left" border="0" style="width:100%;">
<tr>
<th>Status</th>
<th>PositionTitle</th>
<th>Classification</th>
<th>Location</th>
<th>Filter</th>
</tr>
<tr>
<td align="center">
<select name="filterStatus" id="filterStatus">
<option selected="selected" value="">Select Status</option>
<option value="Active">Active</option>
<option value="Interviewing">Interviewing</option>
<option value="New">New</option>
</select>
</td>
<td align="center">
<input name="filterPositionTitle" type="text" id="filterPositionTitle" />
</td>
<td align="center">
<select name="922e5a87-18fd-467f-9e7b-f4210fbd93ea" id="922e5a87-18fd-467f-9e7b-f4210fbd93ea">
<option value="0">Select One...</option>
<option value="9c2e6df7-e319-478c-b137-47eff4e4748d">Administrative</option>
<option value="78ce598b-6dad-4434-9bb5-24429c630943">Certified</option>
<option value="c75f18a4-e503-428c-8e23-83d1dac21997">Classified</option>
<option value="77232a27-2c58-4192-bbbf-1b0b493da564">Other</option>
</select>
</td>
<td align="center">
<select name="filterLocation" id="filterLocation">
<option value="Select Location">Select Location</option>
<option value="77c68429-e878-4778-b467-0d684308b188">Desert Foothills</option>
<option value="d226f2a3-02c4-40c5-b784-949c22647081">District Office</option>
</select>
</td>
<td align="center">
<input type="submit" name="filterJobs" value="Filter Postings" id="filterJobs" />
</td>
</tr>
</table>
<table id="jobPostingsTable" class="tablesorter" align="Left" border="0" style="width:100%;float: left">
<thead>
<tr>
<th></th>
<th>Status</th>
<th>Position Title</th>
<th>Classification</th>
<th>Working Location</th>
</tr>
</thead>
<tbody>
<tr id="2a62a993-fc3a-4a43-96b6-fd663a724b6e">
<td>
<input id="apply2a62a993-fc3a-4a43-96b6-fd663a724b6e" type="checkbox" name="apply2a62a993-fc3a-4a43-96b6-fd663a724b6e" />
</td>
<td>New</td>
<td valign="middle">
<span>Systems Analyst</span>
<img src="images/pdf.png" style="border-width:0px;" />
</td>
<td>Classified</td>
<td>District Office</td>
</tr>
</tbody>
</table>
</div>
Applicable CSS is as follows:
#contentContainer {
background-color:#FFFFFF;
border:1px solid #000000;
float:left;
height:auto;
margin:0;
width:1000px;
}
All tables are set to width of 100%. The buttons in the image don't really matter as they don't seem to affect the table problem whether they are there or not. Usually this sort of thing works just fine, but in IE 7 it is now rendering as follows:
If you want to float your tables, they will need a width in pixels, not percent.