I have a table with radio groups in the last column, where each group has a unique name.
I've set the first radio of each group as checked but for some weird reason the first row has all radios unchecked.
Inspecting the HTML I can see the 'checked' option on the first radio but it's displayed as unchecked.
Something like this:
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>AAAAAAAAAAAA</td>
<td>
<input name="row1" type="radio" checked>X
<input name="row1" type="radio">Y
<input name="row1" type="radio">Z
</td>
</tr>
<tr>
<td>2</td>
<td>BBBBBBBBBBBB</td>
<td>
<input name="row2" type="radio" checked>X
<input name="row2" type="radio">Y
<input name="row2" type="radio">Z
</td>
</tr>
<tr>
<td>3</td>
<td>CCCCCCCCCCCC</td>
<td>
<input name="row3" type="radio" checked>X
<input name="row3" type="radio">Y
<input name="row3" type="radio">Z
</td>
</tr>
</tbody>
</table>
This only happens on the first row and is independent on the data. If the data changes or get sorted in a different way it's still the first row that has the issue.
EDIT: I've just figured out this is caused by jQuery DataTables but still don't know why. Here is an example to reproduce the issue https://jsfiddle.net/xkden3q8/
I fixed this issue with changing datatable library
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
Related
Take a look at this image.
I have a table containing input. Each input is defined by a column header cell and a row header cell. How would you ensure that blind users know what to type in each input field?
Let us use this following simplified html table as example:
<table border="1">
<tr>
<th></th>
<th>Income</th>
<th>Change</th>
</tr>
<tr>
<th>Personal income</th>
<td><input type="number" value="0"></td>
<td><input type="number" value="0"></td>
</tr>
<tr>
<th>Company earnings</th>
<td><input type="number" value="0"></td>
<td><input type="number" value="0"></td>
</tr>
</table>
https://jsfiddle.net/vzr6rmzx/
The answer is described by W3 in example 3:
https://www.w3.org/WAI/tutorials/forms/grouping/
Basically you need to use fieldset, legends and labels that are hidden. The example uses a class that hides labels but i suggest you instead consider aria-label tag which are only read by screen readers (and other assistive technologies) but are visually hidden.
This code I have written will generate lines in between every row and column. Can you please tell me how can I remove some lines in between columns while keeping others (as shown in the last image).
<form action="method="POST">
<table border="1" style="width:400px">
<tr>
<td>January:</td>
<td>$20</td>
<td>february:</td>
<td>$30</td>
<td>March:</td>
<td>$60</td>
</tr>
<tr>
<td>April:</td>
<td>$20</td>
<td>May:</td>
<td>$30</td>
<td>June:</td>
<td>$60</td>
</tr>
<tr>
<td>Description:</td>
<td colspan="5"><input type="text" name="data" value="some data" size="44"/></td>
</tr>
</table>
<input type="submit" name="updatebutton" value="Update" /></form>
You can't. That's just how tables work.
Alternately you can remove the borders from the table, put a DIV in each cell and selectively style the borders of the DIVs.
I'm having trouble with styling a table.
http://jsfiddle.net/Gs7Vx/5/
<tr>
<td class="label">HRS</td>
<td class="label">INSP</td>
</tr>
I want the "HRS" and "INSP" fields in this row to line up with the input fields above them. I've tried a lot of things, none of them have worked. I'm sure there's a simple solution and I'm just missing it.
To get the inputs to line up with the labels, you need to
A) add a blank <td></td> to the second row (because the row above it has 3 cells and it only has 2), and
B) remove float:right; from the .label class.
See this as the example. I only added the <td></td> to the row on the first out of your four sections, but they are all identical, so you get the point.
You would want to setup your table like this:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>HRS</td>
<td>
<input type="text" class="smallinput">
</td>
</tr>
<tr>
<td>INSP</td>
<td>
<input type="text" class="smallinput">
</td>
</tr>
<tr>
<td colspan="2">
<textarea name="textarea" rows="12" class="txt"></textarea>
</td>
</tr>
</table>
Next time format your code before posting. You did not make your intent clear. SO we have multiple people giving you different answers because we are formatting your code and trying to figure out what you really want to do. Make sure you have the same number of <td>s in each row as well or use colspan to make up for the missing ones.
Check this fiddle.
the row above that row containing only two <td>s with content 'hrs' and 'insp', contains 3 <td>s. Hence you need to put a blank td in that row(i.e. with 'hrs' and 'insp') too.
Besides you need to remove the style float:right and add the style position:relative in the style definition of the .smallinput-class.
O/P
This solves your problem..
I took it out of these <td class="label"></td> and put it right in front and it worked fine.
INSP<input type="text" class="smallinput"></td><td width="40px" style="font-size:12px">HRS<input type="text" class="smallinput">
(using chrome.)
your code is all wrong. First of all, you have unclosed elements, all input elements should end with />
Then, to have everything in a line, do it like this:
<tr>
<td>label</td>
<td>input</td>
<td>label</td>
<td>input</td>
</tr>
an then style as needed
this worked for me
<tr>
<td class="fieldtitle"><i style="color:#fff;" class="icon"></i>
</td>
<td width="40px" style="font-size:12px">
<input type="text" class="smallinput"><span style="font-size:10px">HRS</span>
</td>
<td width="40px" style="font-size:12px">
<input type="text" class="smallinput"><span style="font-size:10px">INSP</span>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
Can anybody tell me why my internal rows are not coming inside the td.
<tr id="group_1_id">
<th>Group 1</th>
<td>
<tr id="1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
<tr id="2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
<tr id="3"><td>3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
</td>
</tr>
The 3 table rows comes outside the parent tr. Though they are defined inside the td of my parent tr.
Thanks in advance
I would say that your HTML is not correct. If you want a header section, then use <thead> or <tbody> element, not <th>. I believe your problems emerged from the fact that you have used <th> instead of <thead>.
You may want to use a validator to check whether your HTML is correct. Upload your page to http://validator.w3.org for example, and correct the errors it shows you.
Also check the specification (for example on www.whatwg.org) because I suppose that you wanted to create more than one header section in a table. A table may have not more than one <thead>, not more than one <tfoot>, and any number of <tbody> elements.
Oh, you have just reedited the question, but the problem is the same :)
A <tr> element cannot be placed inside a <td> or <th>. When that code is parsed, a nested table is automagically created, so the real HTML looks like this:
<tr id="group_1_id">
<th>Group 1</th>
<td>
<table>
<tbody>
<tr id="1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
<tr id="2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
<tr id="3"><td>3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
</tbody>
</table>
</td>
</tr>
Here is a link my example of the misaligned table rows
Click preview in the upper top left corner of the JS Bin menu bar to see this example in the works. You can see the top 2 borders of the table cells with Email and an input field in them are a bit lower than the top 2 borders of the 2 table cells to the left of them (Username and an input field).
Why is this happening?
Also I am finding I have to write rowspan="4" for <th> and <td> elements in the second element to make them span the 3 rows beside it. Why do I have to do that? It makes no sense if there are only 3 rows I have to clear. It's as if there is a mysterious hidden row somewhere.
UPDATE with example answer:
I implemented the answer in this example. As you can see, there is perfect alignment between all table cells.
right... easy peasy...
basically, the second row needs to have 4 cells in it, the username and input cells AND the email and input cells...
the username and input cells need to have rowspan="3" and then the NEXT two rows need to be password and new password with their input fields.
code:
<html>
<head>
</head>
<body>
<table border="1">
<tbody>
<tr>
<th colspan="4" rowspan="1">
<h3>Profile Settings</h3>
</th>
</tr>
<tr>
<th rowspan="3">
<label for="">USERNAME:</label>
</th>
<td rowspan="3">
<input type="text">
</td>
<th>
<label for="">Email:</label>
</th>
<td>
<input type="text">
</td>
</tr>
<tr>
<th>
<label for="">Password:</label>
</th>
<td>
<input type="password">
</td>
</tr>
<tr>
<th>
<label for="">New Password:</label>
</th>
<td>
<input type="password">
</td>
</tr>
<tr>
<td colspan="4">
<input type="button" value="save">
</td>
</tr>
</tbody>
</table>
</body>
</html>
Your first row is has 1 td with a colspan of 4, but your second row is 2 td's both with a normal colspan?
Your mark up is flawed, fix this first.
What is the end result supposed to look like?
The way it looks now?