I'm looking to add some kind of separator within a table so I can apply a styling to a specific portion of the table. The table it divided into six columns which are two sets of the subject, the input box, and the marker.
When I add tags, they're thrown to the top when the html is rendered (inspect element on the jsfiddle). Can I add some kind of separator (div, span, or something else) such that each set of three has only one subject, one input box, and one marker.
I need this because when I add a check mark or x to a marker using jQuery, it bleeds over and styles the other marker in the same row the same way. Looking to make them independent.
https://jsfiddle.net/sLy9d67r/
<div class="conjugate-input-container ">
<table class="table table-striped conjugate-input">
<tbody>
<tr>
<div>
<td class="subject">je</td>
<td class="conj-input"><input type="text" id="conj1sg" autocomplete="off" spellcheck="false" tabindex="-1" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
<div>
<td class="subject">nous</td>
<td class="conj-input"><input type="text" id="conj1pl" autocomplete="off" spellcheck="false" tabindex="4" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
</tr>
<tr>
<div>
<td class="subject">tu</td>
<td class="conj-input"><input type="text" id="conj2sg" autocomplete="off" spellcheck="false" tabindex="2" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
<div>
<td class="subject">vous </td>
<td class="conj-input"><input type="text" id="conj2pl" autocomplete="off" spellcheck="false" tabindex="5" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
</tr>
<tr>
<div>
<td class="subject">il</td>
<td class="conj-input"><input type="text" id="conj3sg" autocomplete="off" spellcheck="false" tabindex="3" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
<div>
<td class="subject">ils</td>
<td class="conj-input"><input type="text" id="conj3pl" autocomplete="off" spellcheck="false" tabindex="6" ></td>
<td class="marker"><i class="fa "></i></td>
</div>
</tr>
</tbody>
</table>
</div>
Within a table, you can only insert other elements (eg, span div) in the td. Div's are not allowed between two tr(s) or two td(s).
Related
I have a table where the user can enter some values and transmit these inputs to my backend via a POST request.
Each row consists of a type, brand and some input fields like buyprice, bottom, top, and stop.
For the purpose that I can connect the input data with the backend data it is important to get the information about the brand which is unique in each row.
Because of that I implemented a hidden input field that the necessary pre-defined value.
But when I check my backend, I only receive the data about buyprice, bottom, top and stop. But nothing about the brand.
Here the relevant passage:
<td th:text="${car.getBrand()}">
<input type="text" name="brand" th:value="${car.getBrand()}" hidden>
</td>
Here the complete table (I use thymleaf as a template-engine)
<div class="container">
<br>
<h4 style="text-align: center">Please specify below</h4>
<br>
<form method="POST">
<table id="buyTable" class="table table-hover">
<thead>
<tr>
<th>Type</th>
<th scope="col">Brand</th>
<th scope="col">Buy-Price</th>
<th scope="col">Bottom</th>
<th scope="col">Top</th>
<th scope="col">Stop</th>
<th>Reduce</th>
<th>Start</th>
</tr>
</thead>
<tbody>
<tr th:each="car : ${cars}">
<td>
<select th:id="${car.getBrand()}" title="selectBuyOrSell" onchange="updateBuyTable(this)">>
<option value="buy">Buy</option>
<option value="sell">Sell</option>
</select>
</td>
<td th:text="${car.getBrand()}">
<input type="hidden" name="brand" th:value="${car.getBrand()}">
</td>
<td><input type="number" step="0.00000001" placeholder="Enter price" name="buyPrice" /></td>
<td><input type="number" step="0.00000001" placeholder="Enter bottom" name="bottom" /></td>
<td><input type="number" step="0.00000001" placeholder="Enter top" name="top" /></td>
<td><input type="number" step="0.00000001" placeholder="Enter stop" name="stop" /></td>
<td>
<label class="custom-control custom-checkbox">
<input id="clickboxReduce" type="checkbox" class="custom-control-input"
onclick="handleClickOnStart(this)" checked>
<span class="custom-control-indicator"></span>
</label>
</td>
<td>
<label class="custom-control custom-checkbox">
<input id="clickboxStart" type="checkbox" class="custom-control-input"
onclick="handleClickOnReduce(this)" checked>
<span class="custom-control-indicator"></span>
</label>
</td>
<!-- <td><input id="clickboxReduce" type="checkbox"></td>
<td><input id="clickboxStart" type="checkbox"></td>-->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a style="float:right">Select all</a></td>
<td style="text-align:center"><input type="checkbox" onclick="checkReduce(this)" checked></td>
<td style="text-align:center"><input type="checkbox" onclick="checkInstant(this)" checked></td>
</tr>
</tbody>
</table>
<br/>
<br/>
<button style="float: right!important;" class="btn btn-outline-primary">Continue</button>
<br/>
<br/>
<br/>
<table id="sellTable" class="table table-hover" hidden="true">
<thead>
<tr>
<th>Type</th>
<th>Brand</th>
<th scope="col">Sell-Price</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</form>
</div>
So it is actually only about getting the brand. Any idea?
Thank you
I figured out that th:text="${car.getBrand()}" within the td tag was overriding the hidden input-field.
So the solution is an a tag and a hidden input within the td tag.
<td>
<a th:text="${car.getBrand()}"></a>
<input type="hidden" name="brand" th:value="${car.getBrand()}"/>
</td>
Suggest me some css which can be applied to get desired output like the Image below.
I have been trying to align two forms horizontally and one form vertically bottom of my second form. I am also looking to not use positioning like absolute or relative neither margin properties.
My code:
<div class="col-sm-4">
<div class="shop-menu pull-right" style="color:red;">
<ul class="nav navbar-nav">
<form id="sellerLogin" name="sellerLogin" action="/tiles/sellerLogin.action" method="post">
<div id="emailerr"> </div><div id="passerr"> </div><table class="wwFormTable">
<tbody>
<tr>
<td class="tdLabel"> </td>
<td><input type="text" name="email" value="" id="email" style="color : #000000;" rel="email" placeholder="Enter email-id.."></td>
</tr>
<tr>
<td class="tdLabel"> </td>
<td><input type="password" name="password" id="password" style="color : #000000;" placeholder="Enter Password.."> </td>
</tr>`enter code here`<tr>
<td colspan="2"><div align="right"> <input type="submit" id="sellerLogin_0" value="Login" style="color : #000000;" onclick="return logincheck();">
</div> </td>
</tr>
</tbody> </table> </form>`
What I'm trying to achieve:
Spare me from drawing compliments:).
I have attached image containing elements on my page. I want "format-123-456-7890) exactly below phone element. at present "phone ext" element is wrapped. If i increase size of "format.." element, phone ext element is getting wrapped. don't know solution. here is html code. i want Phone Ext in one line and Format element in one line (don't want to be wrapped).
<table datatable="0" role="presentation">
<caption class="hiddenContent">data table</caption>
<tr>
<td style="width: 30%;text-align: right">*First Name:</td>
<td>
<input type="text" name="elctnFirstName" id="elctnFirstName" value="" aria-required="true" maxlength="40" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">Middle Name:</td>
<td>
<input type="text" name="elctnMiddleName" id="elctnMiddleName" value="" aria-required="true" maxlength="40" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">*Last Name:</td>
<td>
<input type="text" name="elctnLastName" id="elctnLastName" value="" aria-required="true" maxlength="40" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">Email Address:</td>
<td>
<input type="text" name="emailAddress" id="emailAddress" value="" aria-required="true" maxlength="256" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">*Phone:</td>
<td>
<input type="text" name="elctnPhone" id="elctnPhone" value="" aria-required="true" maxlength="12" />
</td>
<td style="width: 20%;text-align: right">Phone Ext:</td>
<td>
<input type="text" name="eltcnPhoneExt" id="eltcnPhoneExt" value="" aria-required="true" maxlength="3" />
</td>
</tr>
<tr>
<td style="width: 40%;text-align: right">(Format-123-456-7890)</td>
</tr>
</table>
Here are a couple of suggestions
1) Use in Phone Ext
2) Let the table go to its natural width rather than setting the with to 40% and 20%
3) Explicity set the widths of <input>. I doubt that the extension field needs to be as long as others
4) Put a nowrap on the cell you don't want to wrap.
5) Use Bootstrap rather than tables to layout your form
I have a reservation form on my website, I own a limo company.
But in order to save space on my website I want to know how to make a 2 column form.
This is my form now:
<form method="post" id="myForm" action="send2.php" class="sendmail" onsubmit="return validateForm()" style="text-align:center;">
<h1 class="lead" align="center" style="font-size:35; font-weight:800">RESERVE TRIP</h1>
<ul li><h1 class="lead" align="center" style="color:black;font-weight:bold;list-style:none;">Contact Information</h1></ul li>
<ul li style="list-style:none">
<li>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<p>
<table>
<td><p><label>Full Name:<input type="text" id="name" name="name" style="margin:10px; width:285px; height:15px"></td>
<td><p><label>Company Name:<input type="text" id="company" name="company" style="margin:10px; width:340px; height:15px"></label></p>
</table>
<table align="center">
<tr>
<td class="width:110px; height:15px">
<p><label>Phone #:<input type="text" id="phone" name="phone" placeholder="###-###-####" style="margin:10px; width:100px; height:15px">
</td>
<td class="width:70px; height:15px">
<p><label>E-mail:<input type="text" id="email" name="email" style="margin:10px; width:220px; height:15px">
</td>
</tr>
<tr>
</td>
</tr>
</table>
</li>
</ul>
<ul li><h1 class="lead" align="center" style="font-weight:bold;color:black;list-style:none">Pick-Up Information</h1></ul li>
<ul li style="list-style:none">
<li>
<option selected="">--</option>
<option>AM</option>
<option>PM</option>
</select></td>
</p>
</table>
<table align="center">
<tr>
<td class="width:110px; height:15px">
<label style="font-size:15px">Airport Name: <span class="error"></span></label>
<td class="width30">
<input type="text" id="rtairport" name="rtairport" class="input85" style="width:180px; margin:10px" value="">
</td>
</td>
<td class="width:110px; height:15px" align="center">
<label style="font-size:15px">Airline/Code:</label>
<td class="width30">
<input type="text" id="rtairline" name="rtairline" class="input85" style="width:75px; margin:10px" value="">
</td>
</td>
<td class="width:70px; height:15px">
<label style="font-size:15px">Flight #:</label>
<td class="width30">
<input type="text" id="rtfnumber" name="rtfnumber" class="input85" style="width:40px;margin:10px" value="">
</td>
</td>
</tr>
<tr>
<td>
</tr>
</td>
</table>
<br>
<li><h1 class="lead" align="center" style="font-weight:bold;color:black;list-style:none">Drop-Off Information</h1></li>
<ul li style="list-style:none">
<center><p><label>Full Address:<input type="text" id="rtstreet" name="rtstreet" style="margin:10px; width:360px; height:15px"></label></p></center>
<table align="center">
<tr>
<td class="width:110px; height:15px">
<label style="font-size:15px">Airport Name: <span class="error"></span></label>
<td class="width30">
<input type="text" id="doairport" name="doairport" class="input85" style="width:200px; margin:10px" value="">
</td>
</td>
<td class="width:110px; height:15px" align="center">
<label style="font-size:15px">Airline/Code:</label>
<td class="width30">
<input type="text" id="doairline" name="doairline" class="input85" style="width:75px; margin:10px" value="">
</td>
</td>
<td class="width:70px; height:15px">
<label style="font-size:15px">Flight #:</label>
<td class="width30">
<input type="text" id="dofnumber" name="dofnumber" class="input85" style="width:40px;margin:10px" value="">
</td>
</table>
</div>
</ul></li>
Any help/advice would help. Thank you.
Put the form fields in two separate divs and float them left. Also make sure to set their widths and to make them fit next to each other.
Make two <div>s. These will be the two columns. Then, in their css, add float: left. If you need any more help, just ask.
What browsers do you need to support? If you're OK using semi-experimental CSS3 features that won't work in older browsers, just use CSS3 columns.
it looks like you need some work with your tables
a general table format might look like
<form action="checkInput.php" method="POST">
<table border="1px solid #C00">
<tr>
<th colspan="2">Table Heading</th>
</tr>
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>An Input for Column 1
<input class="inputCSS" type="text" id="col1input" placeholder="Input Column 1" />
</td>
<td>An Input for Column 2
<input class="inputCSS" type="text" id="col2input" placeholder="Input Column 2" />
</td>
</tr>
<tr>
<td>Another row down for<br>Column 1</td><td>Another row down for<br>Column 2</td>
</tr>
</table>
</form>
this example shows a title "Table Heading" and 3 rows by 2 columns. if you follow the pattern with the <tr> (table rows) and <td> (individual cells) you can expand on this 2 column format. Then you can tweak it to your preference. Also, keep the columns you want lined up in the same tables so the browser lines them up for you
once you start to understand how to type tables, a 2 column form won't be hard.
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.