I want to put a canvas over table, but it is not working.
Here is the code:
<canvas>
<table id="gameField" class="gameFieldAll">
<tr>
<td><input class="Field" type="button" id="00K"onclick="g.pressField(0,0)" ></input> </td>
<td class="fieldRL"><input class="Field" type="button" id="01K"onclick="g.pressField(0,1)"></input> </td>
<td><input class="Field" type="button" id="02K"onclick="g.pressField(0,2)"></input> </td>
</tr>
<tr>
<td class="fieldTop"><input class="Field" type="button" id="10K"onclick="g.pressField(1,0)"></input> </td>
<td class="fieldTop fieldRL"><input class="Field" type="button" id="11K"onclick="g.pressField(1,1)"></input> </td>
<td class="fieldTop"><input class="Field" type="button" id="12K"onclick="g.pressField(1,2)"></input> </td>
</tr>
<tr>
<td class="fieldTop"><input class="Field" type="button" id="20K"onclick="g.pressField(2,0)"></input> </td>
<td class="fieldTop fieldRL" ><input class="Field" type="button" id="21K"onclick="g.pressField(2,1)"></input> </td>
<td class="fieldTop"><input class="Field" type="button" id="22K"onclick="g.pressField(2,2)"></input> </td>
</tr>
The table disappears on the webpage.
Any suggestions? Thanks
The solutution is to place the canvas above the table and make the css propertys position „absolute“ and the z-index of the canvas higher than the zindex of the table.
Related
Here is my HTML code which is a registration form. As you see there is a gap between Name and input part and another gap between E-mail and input part.
How can I remove those gaps without CSS?
<center>
<form>
<table>
<tr>
<td>
Name:
</td>
<td>
<input type="text" , placeholder="Name">
</td>
</tr>
<tr>
<td>
E-mail:
</td>
<td>
<input type="email" , placeholder="Email">
</td>
</tr>
<tr>
<td>
Message:
</td>
<td>
<textarea rows="5" cols="32" placeholder="Message"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<button type="submit">Send your Message</button>
</td>
</tr>
</table>
</form>
</center>
This is my output...
I used center to make my form in the center of my page , i know it is obsolete , i just want to know if there is a way to delete gaps no matter if it is obsolete.
You could just align to the right.
<center>
<form>
<table>
<tr>
<td align="right">
Name:
</td>
<td>
<input type="text" , placeholder="Name">
</td>
</tr>
<tr>
<td align="right">
E-mail:
</td>
<td>
<input type="email" , placeholder="Email">
</td>
</tr>
<tr>
<td>
Message:
</td>
<td>
<textarea rows="5" cols="32" placeholder="Message"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<button type="submit">Send your Message</button>
</td>
</tr>
</table>
</form>
</center>
How do I shift a button to align with the button on the right as follows:
The html as follows:
<table>
<tr>
<td>
<h4> Search: </h4>
</td>
<td>
<input type="text" />
</td>
<td>
<button type="submit" name="abc" form="submitForm" value="Button">Button</button>
</td>
</tr>
<tr>
<td class="customView">
<button type="submit" name="def" form="submitForm" value="Button">Button</button>
</td>
</tr>
</table>
<table>
<tr>
<td>
<h4> Search: </h4>
</td>
<td>
<input type="text" />
</td>
<td>
<button type="submit" name="abc" form="submitForm" value="Button">Button</button>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td class="customView">
<button type="submit" name="def" form="submitForm" value="Button">Button</button>
</td>
</tr>
</table>
add colspan="3" , align="right" to your <td> tag it's work fine,I'm added the snippet below.
<table>
<tr>
<td><h4> Search: </h4></td>
<td><input type="text"/> </td>
<td><button type="submit" name="abc" form="submitForm" value="Button">Button</button></td>
</tr>
<tr >
<td class="customView" colspan="3" align="right"><button type="submit" name="def" form="submitForm" value="Button">Button</button></td>
</tr>
</table>
I'm making a calculator layout and putting all the buttons in a table cells. Here's part of the code:
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
<td><input type="button" class="button" value="-"></td>
<td rowspan="2">
<input type="button" class="button" value="=" style="width:100%;height:100%;">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" class="button" value="0" style="width:100%;"></td>
<td><input type="button" class="button" value="+"></td>
</tr>
So I wan't to make the '=' button to fit (vertically) the table cell it currently sitting on and I've included the css in the tag. But it doesn't work.
I've found someone stating that styling using CSS by setting "height:100%;" but that doesn't seem to work out for me. Interestingly enough, the "width:100%;" seems to work just fine.
Can someone help me pls.
Update: I opt to use <a> to act as a button instead.
<tr>
<td><a class="number">1</a></td>
<td><a class="number">2</a></td>
<td><a class="number">3</a></td>
<td><a class="operator">+</a></td>
<td><a class="operator">-</a></td>
</tr>
<tr>
<td><a class="numberempty" style="border-bottom-left-radius:5px;"></a></td>
<td><a class="number">0</a></td>
<td><a class="numberempty"></a></td>
<td colspan=2><a class="equals">=</a></td>
</tr>
add height to <td rowspan="2" height="100px">
http://jsfiddle.net/p55czapy/24/
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
<td rowspan="2" style="height: 100%;"><input type="button" class="button" value="-" style="height:100%;"></td>
<td rowspan="2" style="height: 100%;">
<input type="button" class="button" value="=" style="height:100%;">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" class="button" value="0" style="width:100%;"></td>
<td><input type="button" class="button" value="+"></td>
</tr>
</table>
Please try this hope it will help
I have a table as below
<table style="border-spacing: 10px; width:auto; table-layout: fixed" id="tblCustomerinput">
<tbody>
<tr>
<td width="2px">
<span class="error"> *</span>
</td>
<td style="width: auto;resize: horizontal;">
<span>Required Field</span>
</td>
<td>
<span id="cvEventsValidator" class="error" style="display:none;">Please complete the required fields below.</span>
<span id="reqFieldValidator" class="error" style="color:Red;display:none;">Please complete the required fields below.</span>
<br>
</td>
</tr>
<tr>
<td width="2px">
</td>
<td width="130px">
<b> <span id="lblCustNumber">Customer Number:</span></b>
</td>
<td>
<input name="txtCustNumber" type="text" maxlength="50" id="txtCustNumber">
</td>
</tr>
<tr>
<td width="2px"><span class="error">*</span>
</td>
<td width="130px">
<b> <span id="lblFirstName">First Name:</span> </b>
</td>
<td>
<input name="txtFirstName" type="text" maxlength="50" id="txtFirstName" class="requiredfield">
</td>
</tr>
<tr>
<td width="2px"><span class="error">*</span>
</td>
<td width="130px">
<b> <span id="lblLastName">Last Name:</span></b>
</td>
<td>
<input name="txtLastName" type="text" maxlength="50" id="txtLastName" class="requiredfield">
</td>
</tr>
<tr>
<td width="2px">
</td>
<td width="130px">
<b> <span id="lblCompanyName">Company Name:</span></b>
</td>
<td>
<input name="txtCompanyName" type="text" maxlength="50" id="txtCompanyName">
</td>
</tr>
<tr>
<td width="2px" span="" class="error">*
</td>
<td width="130px">
<b> <span id="lblPhoneNumber">Phone Number:</span></b>
</td>
<td>
<input name="txtPhoneNumber" type="text" maxlength="50" id="txtPhoneNumber" class="requiredfield">
</td>
</tr>
<tr>
<td width="2px"><span class="error">*</span>
</td>
<td width="130px"><b>
<span id="lblEmail">E-mail Address:</span></b>
</td>
<td>
<input name="txtEmail" type="text" maxlength="50" id="txtEmail" class="requiredfield">
</td>
</tr>
<tr>
<td width="2px">
</td>
<td width="130px">
<b> <span id="lblDynamicField" maxlength="50"></span></b>
</td>
<td>
<input name="txtDynamicField" type="text" maxlength="50" id="txtDynamicField">
</td>
</tr>
<tr>
<td colspan="2"><span id="Label1">Comments:</span>
<br>
<textarea name="txtComment" rows="5" cols="20" id="txtComment" class="feedback_comment" onkeypress="return this.value.length <=1500" onkeydown="limitText(this,1500);" onkeyup="limitText(this,1500);" style="width:360px;" clicks="0" onfocus="clearContents(this);">Please describe the problem you found...</textarea></td>
</tr>
</tbody>
</table>
The width of the second always comes out as 347px for reasons I cant quite comprehend(!!??)
I set a fixed width for the td as 130 px.
Could anyone help me with this please? I had been scratching my head till it aches for this :)
Basically I need to line up the Labels closer to the Textboxes.
As always thanks a ton for your help in advance.
Thanks
The default width of the textarea which spans the first and second column is larger than the 130px. You need to set the width of the textarea to 130px or smaller. Or you can span the textarea's parent td colspan to 3 columns instead of 2.
There are two tables on my page and they appear side-by-side. I want to align the tops of the two tables. How to do that?
Edited:
<body>
<table id="main" cols="2">
<tr>
<td>
<Form id="frmNewEntry" method="post" action="insert_listing.php">
<table id="tblEntry" cols="3" style="border-color:lightblue; border-style:solid;">
<tr><td colspan="3" bgcolor="lightblue" align="center"><strong>Real-Time Vacancy Entry</strong></td></tr>
<tr><td>Date:</td><td><input id="LDate" name="LDate" type="text" size="20" maxlength="11"/>[Select Date from the Calendar Control]
<script type="text/javascript">
calendar.set("LDate");
</script></td>
<td>
<table>
<tr>
<td rowspan="6">
<!-- <iframe src="show_db_vacancy_entries.php" height="800px" width="300px" bordercolor="cyan">
</iframe> -->
</td>
</tr>
</table>
</td>
</tr>
<tr><td>Places:</td><td><input id="Places" name="Places" type="text" size="35" maxlength="30" onblur="this.value=MakeInitialCapital(this.value);"></td></tr>
<tr><td>Company:</td><td><input id="Company" name="Company" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);">
<!-- <input type="button" value="Make Initial Capital" align="left" onclick="this.value=MakeInitialCapital(this.value);"></tr> -->
<tr><td>Designation:</td><td><input id="Designation" name="Designation" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);"></td></tr>
<tr><td>Project Details:</td><td><textarea id="ProjectDetails" name="ProjectDetails" cols="100" rows="10"></textarea></td></tr>
<tr><td>Desired Candidate:</td><td><textarea id="DesiredCandidate" name="DesiredCandidate" rows="3" cols="100"></textarea> <br></td></tr>
<tr><td>HR Name:</td><td><input id="HRName" name="HRName" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);"> <br></td></tr>
<tr><td>HR Contact:</td><td><input id="HRContact" name="HRContact" type="text" size="50"> <br></td></tr>
<tr><td>Email:</td><td><input id="Email" name="Email" type="text" size="50"> <br></td></tr>
<tr></tr>
<tr>
<td bgcolor="lightblue">
<input id="Submit" name="Submit" value="Clear" type="button">
</td>
<td bgcolor="lightblue">
<input id="Submit" name="Submit" value="Submit" type="button">
</td>
</tr>
</table>
</Form>
</td>
<td>
<table id="list" cols="2" style="border:none">
<tr>
<td colspan="2" style="border:none">
<iframe src="show_db_vacancy_entries.php" height="800px" style="border:none;">
</iframe>
</td>
</tr>
<tr>
<td align="left">
<input id="Update" name="Update" value="Update" type="button">
</td>
<td align="right">
<input id="Delete" name="Delete" value="Delete" type="button">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
as far as i could understand your question: you should use:
<table id="table 1">
<tr>
<td valign="top">....<td>
</tr>
</table>
<table id="table 2">
<tr>
<td valign="top">....<td>
</tr>
</table>
Try This one
<div>
<table id="tbl1" style="float:left"></table>
<table id="tbl2" style="float:left"></table>
</div>