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>
Related
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>
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.
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>
I have an input form with a column on the left that contains the label for the input, and a column on the right with the input element. Right now it's a table (sorry):
<tr>
<td>Header</td>
<td><input /></td>
</tr>
I have a couple of inputs that I'd like to take following form:
<tr>
<td>Header (Extra)</td>
<td><input /> (<input />)</td>
</tr>
In the first case, input should expand to fill the whole column. In the second, I'd like the 2 inputs to expand as wide as they can to be the same size, and fill the column.
Ideally, my display would look like
Row 1 _______________________
Row 2 (Extra) __________ (__________)
Is it possible? Thoughts on converting this to more semantic html would also be entertained. Also note that I'd like all of the "Row 2" line to be on 1 line when possible, it should work with a flexible table width.
I wouldn't use CSS for this, I'd just add a second <td> element, but you'd have to use some additional CSS for widths, etc.
<tr>
<td>Header</td>
<td colspan="2"><input style="width: 99.6%" /></td>
</tr>
<tr>
<td>Header (Extra)</td>
<td><input style="width: 99.3%" /></td>
<td>(<input style="width: 99.3%" />)</td>
</tr>
I used the 99.3% for the width because input elements are slightly different and 100% causes it to overflow past the boundaries. I've found 99.3% to work for the best majority of cases in my experience.
Full JSFiddle Example
I could not find a way to get this to format correctly without putting the parentheses in their own cells.
<table>
<tr>
<td>Header</td>
<td colspan="4"><input /></td>
</tr>
<tr>
<th>Target (Actual)</th>
<td><input /></td>
<td> (</td>
<td><input /></td>
<td>)</td>
</tr>
</table>
table {
width:27em;
}
table input {
width:99%;
}
When I set the table width to something like 95%, everything resizes nicely with the browser. A bit of padding on cells keeps the parentheses and inputs from overlapping.
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?