We Keep Coding

extra cell in HTML table

I am trying to print start and end under execution, but I get an extra cell beside End. I use:
<table style="float: center;border:2px;font-size:20px;color:white;border-collapse: collapse;border-spacing: 3;width: 25%;"> <tr><td> PC </td> <td> INSTRUCTION </td> <td> ISSUED </td> <td colspan="2"><table style="font-size:20px;color:white;border-collapse: collapse;border-spacing: 3;width: 25%;"><tr><td>EXECUTION</td></tr></table><table style="font-size:20px;color:white;border-collapse: collapse;width: 25%;"><tr><td>START</td><td>END</td></tr></table> <td> WRITTEN </td></tr>
How can I remove this extra cell?

Your "extra cell" is the space between the end of the cell with contents "END" and the parent cell containing your embedded tables. For your purpose, instead of embedding one table inside another you should use rowspan and colspan.
body {
background-color: black;
}
table,
tr,
td {
border-color: white;
border-style: solid;
border-width: 2px;
}
table {
border-collapse: collapse;
border-spacing: 3;
color: white;
float: center;
font-size: 20px;
text-transform: uppercase;
width: 25%;
}
<table>
<tr>
<td rowspan="2">PC</td>
<td rowspan="2">Instructions</td>
<td rowspan="2">Isused</td>
<td colspan="2">Execution</td>
<td rowspan="2">Written</td>
</tr>
<tr>
<td>Start</td>
<td>End</td>
</tr>
</table>

Column resizing in HTML table

I have two tables. One for header and other for the body. I created it this way so that header will remain fixed if the body overflows.
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
.scroll-example {
display: block;
margin-right: 20px;
width: 100%;
}
td {
border: 1px solid black;
min-width: 100px;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td:hover i {
display: block;
float: right;
visibility: visible;
}
i {
display: none;
visibility: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow: hidden;width: 400px;">
<table id="target" class="scroll-example" style="overflow: hidden;">
<tr>
<td class="col1">HHHHHHHHHHHHH</td>
<td class="col2">HHHHHHHHHHH</td>
<td class="col3">HHHHHHHHHHH</td>
<td class="col4">HHHHHHHHHHH</td>
<td class="col5">HHHHHHHHHHH</td>
<td class="col6">HHHHHHHHHHH</td>
<td class="col7" width="20px" style="border-color: white;"></td>
</tr>
</table>
<table id="source" class="scroll-example" style="overflow: scroll;height: 50px;">
<tr>
<td class="col1"><i class="fa fa-pencil"></i>AAAAAAAAAAA</td>
<td class="col2"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
</tr>
</table>
</div>
Now I am looking for resizing the columns dynamically. So when the user resizes the top table column it should resize the corresponding bottom cell column.
I tried td{resize: horizontal;} but it is not working and I guess that is because of td{min-width:100px;max-width:100px;}.
Is there a way to achieve the column resizing in this table?
I am a beginner with CSS and jQuery. It would be of great help if you could put an example code. Thanks you.
Sample:
I have dragged 'Account Name' column and when I release it, the column width is set.

Ive searched a lot for my own table widget. You need 2 Tables in each of them a colgroup with col´s they have to match your table column count. Ive created a fiddle i hope it´s clear enough. The two col´s of the Tables needs to be synced on your jquery resize functionality.
.head{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
.body{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
<table class="head">
<colgroup>
<col width="100px"> <!-- Our resized column -->
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>#</td>
<td>From</td>
<td>Subject</td>
</tr>
</tbody>
</table>
<table class="body">
<colgroup>
<col width="100px"> <!-- Our resized column -->
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>00001</td>
<td>Mister Exmple</td>
<td>Problems with sharing</td>
</tr>
<tr>
<td>00002</td>
<td>Mister Example 02</td>
<td>Ouh is this a subject?</td>
</tr>
<tr>
<td>00003</td>
<td>Mistr Default</td>
<td>Yo whats up</td>
</tr>
</tbody>
</table>

Read text values from table with same name in for loop

I'm creating online cart. In that i'm getting values through jquery/json GET from my spring/hibernate and it is running with no problems. I've some bugs in adding them in js class now I just want to read each row's textbox's value by it's name.
for Eg:
var product = $('[name="product"]').val();
var vendor = $('[name="vendor"]').val();
<table style="width: 90%; margin: 15px;">
<thead>
<tr style="border-bottom: 2px solid gray;">
<th style="float: left; text-align: left !important" width="50%">Product
Details</th>
<th style="float: left; text-align: left !important" width="25%">Vendor</th>
<th style="float: left; text-align: left !important" width="20%">Quantity</th>
<th style="float: left; text-align: left !important" width="5%"></th>
</tr>
</thead>
<tbody id="tbdyProducts"
style="min-height: 300px; max-height: 300px; overflow: auto; display: block;">
<tr>
<td style="padding-top: 15px; float: left; width: 350px"><span
id="product1" name="product">Xperia M Dual</span></td>
<td style="padding-top: 15px; float: left; width: 190px"><span
id="vendorname1" name="seller" style="height: 20px">sample
vendorname</span></td>
<td style="padding-top: 15px; float: left; width: 100px"><input
type="text" id="proqty1" name="proqty" size="5"
style="height: 20px; text-align: center" value=""></td>
<td align="right" valign="bottom" style="width: 55px"><span
id="deleteRow" onclick="ProductRemove(1)" class="deleteRow"
style="cursor: pointer; cursor: hand">X</span><input type="hidden"
id="hsrate1" name="hsrate" value="250.50"></td>
</tr>
<tr>
<td style="padding-top: 15px; float: left; width: 350px"><span
id="product2" name="product">Mouse</span></td>
<td style="padding-top: 15px; float: left; width: 190px"><span
id="vendorname2" name="seller" style="height: 20px">a valid
company or vendor name</span></td>
<td style="padding-top: 15px; float: left; width: 100px"><input
type="text" id="proqty2" name="proqty" size="5"
style="height: 20px; text-align: center" value=""></td>
<td align="right" valign="bottom" style="width: 55px"><span
id="deleteRow" onclick="ProductRemove(2)" class="deleteRow"
style="cursor: pointer; cursor: hand">X</span><input type="hidden"
id="hsrate2" name="hsrate" value="3.00"></td>
</tr>
<tr id="productSearch" style="display: none;">
<td style="padding-top: 15px; float: left; width: 350px"><span
role="status" aria-live="polite" class="ui-helper-hidden-accessible">1
result is available, use up and down arrow keys to navigate.</span><input
type="text" id="productfinder" size="40" style="height: 20px"
autocomplete="off" placeholder="Product Name or Code"
class="ui-autocomplete-input"></td>
<td style="padding-top: 15px; float: left; width: 190px"><span
id="vendorname" style="height: 20px"> </span></td>
<td style="padding-top: 15px; float: left; width: 100px"><input
type="text" size="5" id="productnos"
style="height: 20px; text-align: center"></td>
<td align="right" valign="bottom" style="width: 55px"><span>X</span></td>
</tr>
</tbody>
</table>
I tried like this but it didn't work:
for(i=0; i< $('[name="product"]').length; i++){
var product = $(this).find('[name="product"]').val();
alert(product);
}

Note that your HTML is invalid (in various ways): Table cell elements don't have name or value attributes. If you want to put arbitrary information in attributes, use data-* attributes instead. (You're also using the same id on more than one element; id values must be unique on the page.)
So two issues:
You're using find to look within the elements, but in fact you want the information from the element you're already looking at
You're using val, but the elements in question aren't form fields. It might work, but if so, it's undocumented.
The simple, reliable thing is to use each and attr:
$('[name="product"]').each(function() {
alert($(this).attr("value"));
});
If instead of alerting you want an array of the values, map and get:
var values = $('[name="product"]').map(function() {
return $(this).attr("value");
}).get();
But again, if you want to put arbitrary attrs on, you'll want to use data-name and data-value instead.

You can use eq method for this:
var product = $('[name="product"]').eq(i).val();
alert(product);
but I would suggest you to use each method
$( '[name="product"]' ).each( function() {
var product = $( this ).val();
console.log( product );
});
Update:
If you want to read there vendor also, you can modify each to accept index:
$( '[name="product"]' ).each( function( index ) {
var product = $( this ).val();
var vendor = $( '[name="product"]' ).eq( index ).val();
console.log( product );
console.log( vendor );
});

HTML table headers to be fixed without scrolling

Please suggest how can i lock the headers in the table not to scroll. Find the sample code : http://jsfiddle.net/7t9qkLc0/14/ .
I want to lock Column1 and Column2 header so that when we scroll down to view the data the table headers are still visible.Thanks in advance.
My html code:
<div id="test" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td>
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<table width="300px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
</table></td></tr>
</table>
</td>
</tr>
</table>
</div>

You have to put your header in a seperate table and put a fixed position on it. Take a look at this.
http://jsfiddle.net/7t9qkLc0/47/
<table width="290px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</table>
<table style="margin-top:25px">
<tr> ....

Try it like this:
Changed this in the HTML:
<th>Column1
<div>Column111</div>
</th>
<th>Column2
<div>Column222</div>
</th>
(The divs are new)
And add this CSS:
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: blue;
color: #fff;
padding: 9px 25px;
top: 0;
line-height: normal;
border-left: 1px solid #800;
}
NOTE: The css is a little bit rough, but with a little bit styling it will look better
FIDDLE
Another way is to separate the headerline from the table and make them 2 elements.

you could assign the position:fixed; attribute to the th style and then style it to fit in with the table so positioning and overlapping is correct.
th {
position: fixed;
}
I also just found this link that answers your question http://jsfiddle.net/T9Bhm/7/

How to produce an answer in the same row after click on 'Click to answer' button

I am not to familiar with javascript, jquery etc. I need help to find out how to after click on the button, pop out filed where I can enter answer for specific question, and after that to show under that question(in same row). Also you can check that here http://jsfiddle.net/bobouch/thbnZ/1/
.table {
width: 99%;
color:#333333;
background-color: #E0E0E0;
border-width: 1px;
border-color: #999999;
border-radius: 3px 3px 3px 3px;
margin: auto;
margin-top: 20px;
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
table , th {
background-color: #F08200;
padding: 8px;
border: 0px solid;
border-color: #E0E0E0;
color:#ffffff;
}
table th:first-child {
width: 10%;
}
table th:nth-child(2) {
width: 80%;
}
table th:last-child {
width: 100px;
}
table, tr {
background-color:#FFFFFF;
}
table tr:hover {
background-color: #D4D4D4;
}
table, td {
text-align: center;
border: 0px solid;
padding: 5px;
border-style: solid;
border-color: #E0E0E0;
}
//html
<table class='table'><th>Id</th><th>Question</th><th>Date</th><th>Answer</th>
<tr>
<td>
1
</td>
<td>
Some question here1
</td>
<td>
Date
</td>
<td>
<button onclick='myFunction()'>Click to answer</button>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Some question here2
</td>
<td>
Date
</td>
<td>
<button onclick='myFunction()'>Click to answer</button>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Some question here3
</td>
<td>
Date
</td>
<td>
<button onclick='myFunction()'>Click to answer</button>
</td>
</tr>
</table>

If you're using pure javascript you can use some function parameters to do what you would like.
Something like this:
HTML
<h3 align="center">After hiting the Click button, i need to pop out field where i can answer specific question? How to produce an answer in the same row under each question </h3>
<table class='table'><th>Id</th><th>Question</th><th>Date</th><th>Answer</th>
<tr>
<td>1</td>
<td id='q1'>Some question here1</td>
<td>Date</td>
<td><button onclick="clickMe('First Question', 'q1');" type="button">Click to answer</button></td>
</tr>
<tr>
<td>2</td>
<td id="q2">Some question here2</td>
<td>Date</td>
<td><button onclick="clickMe('Second Question', 'q2');" type="button">Click to answer</button></td>
</tr>
<tr>
<td>3</td>
<td id="q3">Some question here3</td>
<td>Date</td>
<td><button onclick="clickMe('Third Question', 'q3');" type="button">Click to answer</button></td>
</tr>
</table>
Javascript:
<script type="text/javascript">
function clickMe(Question, id)
{
var QuestionPrompt = prompt(Question,"Type your answer here...");
if (QuestionPrompt!==null)
{
var curText = document.getElementById(id).innerHTML;
var newText = curText + "<br/>" + QuestionPrompt;
document.getElementById(id).innerHTML = newText;
}
}
</script>
The onclick events send the question text and the id of the cell you want to put the answer in. The javascript function shows a simply input box and takes the answer and appends it to the cell with the question.
Not pretty or complicated, but it gets the job done. You could improve it in a lot of different ways.