I have a table with a structure like this:
<tr>
<td class="data">
<input type="number" step="0.5" min="0" name="data" value="1" />
<div class="increment-decrement">
<a class="increment-button"></a>
<a class="decrement-button"></a>
/div>
</td>
</tr>
64 row, 13 cell each. I have hover effect on every <tr>, that gives the row highlight and another hover on every <td> that sets the inner div's display property to inline-block.
When I mouse over in Internet Explorer (even in IE11) the rows and cells hover effect lags like hell. In Chrome it is really smooth. If I remove the input fields the performance is okay, but I need those.
Related
I have this issue. I have written this HTML code, but I am unable to align between the question, yes/no buttons and text area box. My question has huge space from yes/no buttons, but when I drag the text area box and making it smaller, the question and yes/no buttons come closer as I wanted it to look. How can I fix this issue so my question is next to the yes/no buttons and box is underneath and doesn't move when I drag to make it bigger or smaller?
<table cellspacing="2" cellpadding="2">
<tr>
<td class="data_yy">
<input type="radio" name="jack" id="jack" value="Y" onclick="hideShowJacks('Y');"/><label>Yes</label>
<input type="radio" name="jack" id="jack" value="N" checked onclick="hideShowJacks('N');"/><label>No</label>
</td>
<td class="data_xx"> Are are taking English class in fall?</td>
</tr>
<tr>
<td>
<textarea cols="120" rows="5" maxLenghth="20" class="resizable" name="jack" id="jack"> </textarea>
<div class="plaintext" style="justify:left" id="jack"> </div>
</td>
</tr>
</table>
So, this is a table, and you have two cells in the first row, and only one cell in the second row. You'll want that second cell to have colspan="2" as a property...
<td colspan="2">
And then, for the second part of your issue ("so my question [text] is next to the yes/no buttons"), you'll want to change the first yes/no cell to have <nobr> so it doesn't linebreak, and also set width="1"...
<td class="data_yy" width="1">
Made a quick working demo.
Does this look right?
I was maintaining a very old web project and found issues with the alignment. It seems to be very simple HTML or CSS issues, but I couldn't figure it out.
The app generates two tables in the code behind(populates the contents of the second table) and stacks them up like this:
<table border="1">
<tr>
<td width="70%" align="center">Description</td>
<td width='75px'>Header1</td>
<td width='75px'>Header2</td>
<td width='75px'>Header3</td>
</tr>
</table>
<table border="1">
<tr>
<td width='70%'>
<input type="text" name="first_name" value="Software" style="width:100%" />
</td>
<td width='75px'>
<input type="text" value="2000" style="width:100%" />
</td>
<td width='75px'>
<input type="text" value="1" style="width:100%" />
</td>
<td width='75px'>
<input type="text" value="2" style="width:100%" />
</td>
</tr>
</table>
The first table serves as the header while the second table contains the detail rows.So each header should align properly with its content. But when I resize the window, the alignment is messed up.
I just wondering why it happens as the tables follow the same structure. The only difference is the second table uses some input elements instead of plain text.
That's how tables work. The content of the first table is too big to shrink the table cells as much as the 2nd table. A quick check is to change the text in the first table, see this fiddle for instance: https://jsfiddle.net/q4zzvcra/
Also, td width="75px" needs to be td width="75" ditch the px
In html 5 width is not supported anymore for td, use css instead, see this post: HTML 'td' width and height
I tried this out at https://jsfiddle.net/9p37p2en/.
The only difference is the second table uses some input elements instead of plain text.
And that's exactly your problem. The text nodes will never shrink beyond the minimum width of the longest word, so unless you get rid of the overflow in your table, your table cell won't shrink smaller than that. An text INPUT field however can shrink until just a few px.
Also:
Absolute widths in table cells are ignored if in that same table there are cells with relative width. You can safely remove the width=75px, it doesn't do anything at all.
You should not use td's width and align properties. Use its style or class property instead together with the correct CSS.
I have a html table which contains large blocks of information. Above this I have 3 input buttons which were initially in a different table. 2 of the buttons were on the left with a line of text in front of them and the third button was over to the right.
It looked like this:
---------------- indicates space
asdas [button] [button]---------------------[button]
+----------------------------------------------++--------------------------------+
+----------------------------------------------++--------------------------------+
+----------------------------------------------++--------------------------------+
+----------------------------------------------++--------------------------------+
+----------------------------------------------++--------------------------------+
+----------------------------------------------++--------------------------------+
+----------------------------------------------++--------------------------------+
+----------------------------------------------++--------------------------------+
What I wanted to do was align the third button with the right hand side of the left module. The table below the buttons is a simple one which are split two <td>'s.
What I did was I put another row on the table and put the buttons in the first td. I then used style="float: right;" on the third button to move it over. This worked in Firefox but in IE the button dropped down slightly below the other buttons(although it was still aligned right). I can't go changing the CSS files so has anyone got any other work around solutions to right align the button with the left side of the table below and keep in on the same line? All the buttons are in the same cell.
Here is the html I am currently using for the table:
<table id="" summary="">
<tr>
<td class="">
Text: <input type="button" class="" value="" onclick="" />
<input type="button" class="" value="" onclick="" />
<input type="button" class="" style="float:right;" value="" onclick="" />
</td>
<td class="">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
If you wish to place the buttons in the same table, you can choose to put a 'text-align: right;' on the table cell in which your third button is placed. This should place your button to the right of the cell on the same horizontal line as the other buttons.
I've got a form inside a table that has some Javascript validation. The table tag is
<table style="padding-left:70px" align="left" cellpadding="10">
and a given row looks like this:
<tr id="email_row">
<td align="right" valign="top">
<label for="email">Email: *</label>
</td>
<td class="field_cell" valign="top">
<input type="text" name="email" maxlength="80" size="30"><span class="error_field"></span>
</td>
</tr>
If the user hits submit without this or other fields filled (or filled correctly), the span gets filled with an error message like "Invalid" or "Required." Unfortunately, doing this shifts the whole tbody over do the left (even though it is aligned left). Any suggestions?
FYI, I can only reproduce this problem in Chrome. Firefox and IE are working just fine.
Fixed!
The problem was that I had a row of text in the table with colspan=2 that made the width of the table greater than the width of any of the other rows.
Adding text to the <span> elements increased the width of the second column, which in turn caused the first column to become smaller (since its cells were aligned to the right).
I'm designing a form: image and code below. There are about 30 more sections like this, and I just need the inputs (right) to align to the list (center). What's the best way to do this? Can I just alter my table HTML to make it work?
Layout http://img85.imageshack.us/img85/2199/screenshot20091227at719.png
<table border="1">
<thead>
<tr>
<th>Category</th>
<th>Risk Factors</th>
<th>Hours per Day</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>Repetition</strong>
<p>Finger, Wrist, Elbow, Shoulder or Neck Motions</p>
</td>
<td>
<ol>
<li><strong>Identical or Similar Motions Performed Every Few Seconds</strong><br />Motions or motion patterns that are repeated every 15 seconds or les. (Keyboard us is scored below as a separate risk factor.)</li>
<li><strong>Insensitive Keying</strong><br />Scored Separately from other repetitive tasks in the repetition category and includes steady pace as in data entry.</li>
<li><strong>Intermittent Keying</strong><br />Scored Separately from other repetitive tasks. Keyboard or other input activity is regularly alternated with other activities for 50 to 75 percent of the work.</li>
</ol>
</td>
<td>
<input autocomplete="off" size="2" type="text" name="a_1" id="a_1" class="text-input" value="<?php print $this->validation->a_1?>"/>
<input autocomplete="off" size="2" type="text" name="a_2" id="a_2" class="text-input" value="<?php print $this->validation->a_2?>"/>
<input autocomplete="off" size="2" type="text" name="a_3" id="a_3" class="text-input" value="<?php print $this->validation->a_3?>"/>
</td>
</tr>
</tbody>
</table>
I think you will need to use distinct rows in the table for each line. For the first column, you can use "rowspan=3" to have that column flow over all 3 rows.
You can break that down into a 4x3 table, with the left side having just 2 rows, the second having a rowspan=3. That would probably end up looking the way you wanted.
To get your horizontal dividers in there, you may want to use colgroup to group your columns; this allows you to attach borders. By the same token, you can format the white row as a THEAD and the grey part as a TBODY.