I have the following html :
<table id="TableNewUser" runat="server" width="50%" cellpadding="3" cellspacing="1"
border="0">
<tr>
<th colspan="2">
New User
</th>
</tr>
<tr>
<td width="50%" align="right">
<asp:TextBox ID="TextBoxUsername" runat="server" Style="direction: rtl;" MaxLength="25"></asp:TextBox>
</td>
<td align="left" width="50%">
UserName
</td>
</tr>
<tr>
<td align="right">
<asp:TextBox ID="TextBoxPass" runat="server" MaxLength="25"></asp:TextBox>
</td>
<td align="left">
Password :
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="ButtonSubmit" runat="server" Text="Submit" OnClick="ButtonSubmitClick" />
</td>
</tr>
</table>
I wanna change the tr style whenever the text-boxes are focused.
I've used below CSS code but it doesn't work.
input[type="text"]:focus tr
{
background-color: #e7e7e7;
}
Could you please guide me?
As Mr. Dissappointment stated, you must use JavaScript (or jquery) to achieve what you want.
I coded a very simple HTML page to exemplify:
<html>
<head>
<script type="text/javascript">
function changeTrStyle()
{
document.getElementById("trId").style.background = "red";
}
</script>
</head>
<body>
<table>
<tr id="trId">
<td>
<input type="text" onfocus="changeTrStyle()"/>
</td>
</tr>
</table>
</body>
</html>
If you focus the textbox, the tr background will become red.
Note: Tested on Safari and Chrome.
Related
I'm working on a school project, where we have to design a website with html 4.01 and must not use CSS at all. My Question is, how can I expand a table over the whole window height? I have tried the height attribute with a percantage value, but it didn't work. I couldn't find any good solutions for my problem since all of them used inline CSS or the style tag.
here is my code:
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<title>Horse Audio</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tbody><tr bgcolor="#d1bc8a">
<td width="4%">
<center><img src="images/Logo.png" alt="Logo" width="45" height="45" align="middle"></center>
</td>
<td>
<font color="#3d5385" size="56px" face="DejaVu Serif Bold"><b>HORSE AUDIO</b></font>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Contact</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Product</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>FAQ</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="25%">
<center>Search</center>
</td>
</tr>
<tr>
<td colspan="5">
<center>Test</center>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#322c1d">
Test
</td>
</tr>
</tbody></table>
</body>
</html>
If you specify the version as HTML5 and try to set height="...", it won't work. Since in HTML5 there isn't a height-attribute for table, it will be ignored.
Without CSS, the best you can do is:
Try deleting: <!DOCTYPE html>
and then add: height="100%" to <table>.
<html lang="en-GB">
<head>
<title>Horse Audio</title>
</head>
<body>
<table height="100%" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tbody><tr bgcolor="#d1bc8a">
<td width="4%">
<center><img src="images/Logo.png" alt="Logo" width="45" height="45" align="middle"></center>
</td>
<td>
<font color="#3d5385" size="56px" face="DejaVu Serif Bold"><b>HORSE AUDIO</b></font>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Contact</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Product</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>FAQ</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="25%">
<center>Search</center>
</td>
</tr>
<tr>
<td colspan="5">
<center>Test</center>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#322c1d">
Test
</td>
</tr>
</tbody></table>
</body>
</html>
When I run it on Firefox or Chrome, it works just fine.
You should set the height of <body> and <html> to 100% too. Then you can set the height of element with 100%.
body, html {
height: 100%;
}
table {
height: 100%;
}
I have a table with a cell with 2 items (input text and image). I try to align them vertically but it does not work.
I try use vertical-align:middle, margin top, padding, try set height:100%, etc...
The code is simply:
<table cellspacing="0" rules="all" border="1" id="Origen" style="width:100%;border-collapse:collapse;">
<tr>
<td class="cabeceraDG"> Origen</td><td class="cabeceraDG"> Centro</td><td class="cabeceraDG"> Usuario</td>
</tr><tr style="white-space:nowrap;">
<td class="campoOpcional">oficina</td><td class="campoOpcional" align="center" style="width:150px;">
<input name="Origen$ctl02$referenciaTextBox" type="text" value="0000" id="Origen_ctl02_referenciaTextBox" class="campoOpcional" onblur="return validate(this)" ref="0991" />
<input type="image" name="Origen$ctl02$imgBtnGuardarCentro" id="Origen_ctl02_imgBtnGuardarCentro" title="Guardar" AutoPostBack="false" src="https://s30.postimg.org/usmf6nsn5/boton_Abonar.gif" onclick="return ASPxClientEdit.ValidateGroup(); msGuardar();" style="border-width:0px;" />
</td><td class="campoOpcional">TEST</td>
</tr>
</table>
And here an example with the problem: https://jsfiddle.net/javierif/nmpmj1eh/
Add vertical-align: middle to .campoOpcional input and it works - see demo below:
.campoOpcional input {
vertical-align: middle;
}
<table cellspacing="0" rules="all" border="1" id="Origen" style="width:100%;border-collapse:collapse;">
<tr>
<td class="cabeceraDG">Origen</td>
<td class="cabeceraDG">Centro</td>
<td class="cabeceraDG">Usuario</td>
</tr>
<tr style="white-space:nowrap;">
<td class="campoOpcional">oficina</td>
<td class="campoOpcional" align="center" style="width:150px;">
<input name="Origen$ctl02$referenciaTextBox" type="text" value="0000" id="Origen_ctl02_referenciaTextBox" class="campoOpcional" onblur="return validate(this)" ref="0991" />
<input type="image" name="Origen$ctl02$imgBtnGuardarCentro" id="Origen_ctl02_imgBtnGuardarCentro" title="Guardar" AutoPostBack="false" src="https://s30.postimg.org/usmf6nsn5/boton_Abonar.gif" onclick="return ASPxClientEdit.ValidateGroup(); msGuardar();"
style="border-width:0px;" />
</td>
<td class="campoOpcional">TEST</td>
</tr>
</table>
Use this code,
input inside the campoOpcional needed vertical-align
.campoOpcional input {
vertical-align: middle;
}
I have a problem with nested tables. In my Company we have an old website wich is based on an table layout. I want to add dynamicaly a new td in one tr. If this td is set, in the other tr's i will set on the last td a colspan=2.
If i do this, my table looks like this:
|----|-|-------|--|---|-|-|
|----|-|-------|--|---|-|-|
|----|-|-------|--|---|-|-|
instead of looking like this:
|---|-|----|--|---|-|-----|
|---|-|----|--|---|-|-----|
|---|-|----|--|---|-|-----|
( - only defined as width not as colspan)
This is sample markup from my code:
<table border="0" width="100%" cellspacing="0" cellpadding="1">
<tbody>
<!-- Headline tr -->
<tr>
<td width="100%" valign="middle" nowrap align="left" colspan="7">
Titel
</td>
<!-- New dynamic Field -->
<td nowrap align="right">
<img src="example.gif" width="15px" height="15px"/>
</td>
</tr>
<tr>
<td nowrap align="left">
Name
</td>
<td>
:
</td>
<td width="50%" align="left">
<input readonly value="test" />
</td>
<td >
<img src="blank.gif" />
</td>
<td nowrap align="left">
Number
</td>
<td>
:
</td>
<td width="100%" align="left" colspan="2">
<input readonly value="test" />
</td>
</tr>
<tr>
<td nowrap align="left">
Name
</td>
<td>
:
</td>
<td width="50%" align="left">
<input readonly value="test" />
</td>
<td >
<img src="blank.gif" />
</td>
<td nowrap align="left">
Number
</td>
<td>
:
</td>
<td width="100%" align="left" colspan="2">
<input readonly value="test" />
</td>
</tr>
<tr>
<td nowrap align="left">
Name
</td>
<td>
:
</td>
<td width="50%" align="left">
<input readonly value="test" />
</td>
<td >
<img src="blank.gif" />
</td>
<td nowrap align="left">
Number
</td>
<td>
:
</td>
<td width="100%" align="left" colspan="2">
<input readonly value="test" />
</td>
</tr>
</tbody>
</table>
This table is nested in a table with <table width="100%" height="100%">
Whats the failure?
You can't have a different number of td in rows (tr) from the same parent table.
In your example, you have 8 (7+1) td in your first row and only 7 (5+2) in both others.
It may break your table..
I have solved the problem. In my First row, the first td with colspan=7 dont need the width="100%". Now its functional.
In the image above First Name and Textfield are not aligned from the left. I don't know whether its border or padding. But the image inside is conditionally visible. How to get rid of it just by html and css.
<div id=first_name>
First Name<br />
<table>
<tr>
<td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' /></td>
<td><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" /></td>
</tr>
<tr>
<td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span></td>
</tr>
</table>
</div><!-- eof first_name -->
The problem was that even though you have the image hidden, there is still a <td> element, I made a few changes to the code, I put the First Name into a <td> to align with your input. Also wrapped it in a label. I removed the td the image was in, you could either put it in the same cell as the input, or dynamically add it with javascript and take it out completely (this would be my approach).
<div id=first_name>
<table>
<tr>
<td>
<label for='form_first_name'>First Name:</label>
</td>
</tr>
<tr>
<td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none;' /><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
</tr>
<tr>
<td><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span></td>
</tr>
</table>
</div><!-- eof first_name -->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<img src='images/form_error.png' class="error_image"
id="form_first_name_err_img" style='display: none' />
</td>
<td>
<input align="middle" id="form_first_name" class="form_field1"
type="text" name="first_name" />
</td>
</tr>
<tr>
<td colspan="2">
<span class="error_msg" id="form_first_name_err_msg"
style='display: none'>This cannot be left blank.
</span>
</td>
</tr>
</table>
try this
Set border to 0 in table tag as shown below
<table border="0">
HTML
<div id="first_name">First Name</div>
<table class="tables" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
</td>
<td>
<input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
</tr>
<tr>
<td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span>
</td>
</tr>
</table>
Demo
OR
HTML
<div id="first_name">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>First Name:
</td>
</tr>
<tr>
<td>
<input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
<td>
<img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
</td>
</tr>
<tr>
<td colspan="2"> <span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank. </span>
</td>
</tr>
</table>
</div>
Demo
While putting the archaic: <table cellspacing="0" cellpadding="0"> would still produce good enough results in most (backward compatible) browsers, attributes cellpadding and cellspacing are not supported in HTML5 and shouldn't be used.
Rather put something like this in your stylesheet:
#first_name table {
border-collapse: collapse;
border-spacing: 0;
}
#first_name td {
padding: 0;
}
#first_name input {
margin: 0;
}
Of course, you can add classes to your elements and update the stylesheet accordingly.
TIP: For future similar problems, try using dev tools in your browser of choice and investigate what default style is being applied to the elements, so you can adjust accordingly.
Is it possible to use element after hover effect
I tried like this
.tableclass tr td:hover a{
color:#fff;
}
what i am trying to do that when i hover the td so then anchor link inside that td should change its color to white..
here is how i tried my self but not working for me?
.GridAlternate td:hover a , .GridRowStyle td:hover a{
color:#fff;
}
My GridView HTML
<table cellspacing="0" border="1" style="border-collapse:collapse;" id="GV_Users" rules="rows" class="DefaultGridStyle">
<tbody><tr class="GridHeader">
<th scope="col">User Name</th><th scope="col">Role Name</th><th valign="middle" align="left" style="width:22%;" scope="col">LogIn</th><th valign="middle" align="center" style="width:33%;" scope="col">Action</th>
</tr><tr class="GridRowStyle">
<td>
Ali Nisarr
</td><td>
Admin
</td><td valign="middle" align="left">
alinisar#ken.com
</td><td valign="middle" align="center">
Edit
Remove
Disable
</td>
</tr><tr class="GridAlternate">
<td>
Nizam Ullah
</td><td>
Admin
</td><td valign="middle" align="left">
nizam#ken.com
</td><td valign="middle" align="center">
Edit
Remove
Disable
</td>
</tr><tr>
<td colspan="4">
<table class="GridPager">
<tbody><tr>
<td width="7%">
Showing
:
</td>
<td width="5%">
<span id="lbl_rowstartindex">1</span>
-
</td>
<td>
<span id="lbl_rowendindex">2</span>
</td>
<td>
of
</td>
<td>
<span id="lbl_totalrecords">2</span>
</td>
<td width="50%" align="center">
</td>
<td width="18%" align="right">
Displaying per page:
</td>
<td align="left">
<input type="text" id="TxBx_PageSize" maxlength="3" value="10" name="ctl00$CPH_Content$TC_SysUsers$TP_Users$GV_Users$ctl05$TxBx_PageSize">
</td>
<td align="left">
Change
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
Am i doing something wrong or is there any other approach i should follow?
try this;
tr.GridAlternate td:hover a , tr.GridRowStyle td:hover a{
color:#fff;
}
And make sure to insert this at the end of the style sheet. Maybe it is being override by other class.
I hope this helps
http://codepen.io/princemaple/pen/Dcxdi
It's totally working for me.
I assume some of your rules are wrongly cascaded?
Like you have more specific targeting rules overrides this rule...
Why dont you try
.tableclass td:hover a {
color:#fff;
}