Background color doesn't add - asp.net

I have a table as :
<div class="Bar" >
<table width="100%">
<tr>
<td width="20%">
<asp:LinkButton ID="LnkHome" runat="server" ForeColor="Black" Text="Home"></asp:LinkButton>
</td>
<td width="20%">
</td>
<td width="20%">
</td>
<td width="20%">
</td>
<td width="20%">
</td>
</tr>
</table>
</div>
i tried adding Background color through css on table as
.Bar table tr td
{
background-color:Maroon;
}
but doesn't give the background color.Thanks for assistance.


css
.Bar table tr td
{
background-color: Maroon;
height:50px;
}
Html
<div class="Bar">
<table width="100%">
<tr>
<td width="20%">Hello
</td>
<td width="20%">Hello
</td>
<td width="20%">Hello
</td>
<td width="20%">Hello
</td>
<td width="20%">Hello
</td>
</tr>
</table>
</div>


I tried, it works
fiddle
<div class="Bar" >
<table width="100%">
<tr>
<td width="20%">aaaaaaaaaaaa</td>
<td width="20%"></td>
<td width="20%">aaa
</td>
<td width="20%">
</td>
<td width="20%">
</td>
</tr>
</table>
</div>
.Bar table tr td
{
background-color:Maroon;
color: white;
}


it works properly. i think your problem is from <td></td> tag, that is empty. see here http://jsfiddle.net/sYfLR/

Related

Access specific table cells

I have a table generated through a foreach (PHP) The problem is that I want to modify some specific cell on this table (in red) Knowing that I can not add a class, I must access it with a CSS style
EDIT :
I need add style to the first and last <td>, of the last <tr> with the .child class
Indeed, it is an ajax request that creates the <tr> with .child class So sometimes there are 2 <tr> and sometimes 10 <tr>
.tb-child .child th, .tb-child .child td, .details-close {
background: #f3f3f3;
text-align: center;
}
tbody > tr.child:last-child > td:first-child {
border-radius: 4px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="table-responsive table-padding tb-child">
<table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr class="5007963">
<td id="5007963"></td>
<td>
<a rel="details">5007963</a>
</td>
<td>25</td>
<td data-sort="0" class="sorting_1">
<div>25</div>
</td>
<td data-sort="68">
<div>42</div>
</td>
<td data-sort="-16">
<div>21</div>
</td>
<td></td>
</tr>
<tr class="5012152">
<td class="details-control details-close first-plan"></td>
<td>
<a rel="details">5012152</a>
</td>
<td>3000</td>
<td data-sort="-22.23">
<div>2333</div>
</td>
<td data-sort="-22.2">
<div>2334</div>
</td>
<td data-sort="-29.63">
<div>2111</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th></th>
</tr>
<tr class="child 5012152">
<td></td>
<td>
<a rel="bin">
AZERTY1
</a>
</td>
<td>1000</td>
<td data-sort="66.7">
<div>1667</div>
</td>
<td data-sort="16.7">
<div>1167</div>
</td>
<td data-sort="44.4">
<div>1444</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<td style="background: red"></td>
<td>
<a rel="bin">
AZERTY2
</a>
</td>
<td>1000</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-66.7">
<div>333</div>
</td>
<td style="background: red"></td>
</tr>
<tr class="5012277">
<td id="5012277"></td>
<td>
<a rel="details">5012277</a>
</td>
<td>10</td>
<td data-sort="-30" class="sorting_1">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
jsiddle
I tried several things like:
tbody > tr.child:last-child > td:first-child {
border-radius: 4px
}
But nothing works .. How to do?

This will work for you.
I have used nth-last-child(2) to target the td's in red.
My added Code:
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px;
}
.tb-child .child th, .tb-child .child td, .details-close {
background: #f3f3f3;
text-align: center;
}
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="table-responsive table-padding tb-child">
<table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr class="5007963">
<td id="5007963"></td>
<td>
<a rel="details">5007963</a>
</td>
<td>25</td>
<td data-sort="0" class="sorting_1">
<div>25</div>
</td>
<td data-sort="68">
<div>42</div>
</td>
<td data-sort="-16">
<div>21</div>
</td>
<td></td>
</tr>
<tr class="5012152">
<td class="details-control details-close first-plan"></td>
<td>
<a rel="details">5012152</a>
</td>
<td>3000</td>
<td data-sort="-22.23">
<div>2333</div>
</td>
<td data-sort="-22.2">
<div>2334</div>
</td>
<td data-sort="-29.63">
<div>2111</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th></th>
</tr>
<tr class="child 5012152">
<td></td>
<td>
<a rel="bin">
AZERTY1
</a>
</td>
<td>1000</td>
<td data-sort="66.7">
<div>1667</div>
</td>
<td data-sort="16.7">
<div>1167</div>
</td>
<td data-sort="44.4">
<div>1444</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<td style="background: red"></td>
<td>
<a rel="bin">
AZERTY2
</a>
</td>
<td>1000</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-66.7">
<div>333</div>
</td>
<td style="background: red"></td>
</tr>
<tr class="5012277">
<td id="5012277"></td>
<td>
<a rel="details">5012277</a>
</td>
<td>10</td>
<td data-sort="-30" class="sorting_1">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
But some of the styles are there which comes from bootstarap css so if you want to over-right them also you will have to use !important in your style.
sample -
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px !important;
}
Hope this was helpfull for you.

Asp: Wrap image inside a Table

what I'm trying to do is create a marque of images going up to down
Here is my code
<table>
<tr>
<td></td>
<td style="table-layout:fixed;border-collapse:collapse;">
<marquee direction="down">
<table >
<tr>
<td>
<img src="../Advertise/Add1.jpg" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add2.jpg" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add3.jpg" />
</td>
</tr>
</table></marquee>
<td/>
</tr>
</table>
Add1,Add2,Add3 are inside a folder
Now the problem is the size of the image was same as it is actually
i want to wrap it according to the size of my <td>
please give me suggestions how to do it
thanks in advance.

set height and width to 100% as mentioned below :
<img src="../Advertise/Add1.jpg" style="height:100%;width:100%" />
HTML:
<table>
<tr>
<td></td>
<td style="table-layout: fixed; border-collapse: collapse;">
<marquee direction="down">
<table>
<tr>
<td>
<img src="../Advertise/Add1.jpg" style="height: 100%;width: 100%" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add2.jpg" style="height: 100%;width: 100%" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add3.jpg" style="height: 100%;width: 100%" />
</td>
</tr>
</table>
</marquee>
</td>
</tr>
</table>

how to make div overflow when there're some tables in the div content

My html code with inline css:
<div id="ggicci_syntax_highlighter" style="border: solid 3px black; cursor: text; overflow-x: auto; width: 100%;">
<table id="ggicci_outer_table" cellspacing="0" style="font-family:Consolas;">
<colgroup>
<col style="background-color: #44F;"><!-- You can set font here -->
<col style="background-color: #f4f4f4; width: 100%;">
</colgroup>
<tr>
<td></td><!-- corner -->
<td id="ggicci_language_text" style="font-size:25px; color: #777; font-family: Arial Black;"> <!-- header -->
C++
</td>
</tr>
<tr>
<td>
<table id="ggicci_line_number" style="font-size: 14px; color: #DDD;"><!-- You can set style here -->
<tr>
<td>1:</td>
</tr>
<tr>
<td>2:</td>
</tr>
<tr>
<td>3:</td>
</tr>
<tr>
<td>4:</td>
</tr>
<tr>
<td>5:</td>
</tr>
<tr>
<td>6:</td>
</tr>
<tr>
<td>7:</td>
</tr>
<tr>
<td>8:</td>
</tr>
</table>
</td>
<td>
<table id="ggicci_code_body" style="font-size: 14px; width: 100%;"><!-- You can set style here -->
<tr>
<td style="background: #FFF">
<span style="color:#FF7700; font-weight:bold;">#include</span> <iostream>
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">using</span> namespace std;
</td>
</tr>
<tr>
<td style="background: #FFF">
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">int</span> main()
</td>
</tr>
<tr>
<td style="background:#FFF;">
{
</td>
</tr>
<tr>
<td>
std::cout << <span style="color:#EB2244;">"Hello World!"</span> << std::endl;<span style="color:green;">//write "Hello World!" to console............................................................</span>
</td>
</tr>
<tr>
<td style="background: #FFF"> <span style="color:blue; font-weight:bold;">return</span> 0;</td>
</tr>
<tr>
<td>
}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and I can't make the content in div scroll when the text in a line in the table where the id is "ggicci_code_body" overflows. I'm new to css and now I'm designing a syntax highlighter for programming practice. So any solution? and why this can't work?

Add '<!doctype html>' at the start of html file.

Placing image on bottom right corner of table cell does not work in Firefox and Safari

I have the following table structure in my aspx page. I need to place the image at bottom right corner of a table cell. The code below works fine for IE and Chrome. But in Firefox and Safari, the image is displayed at the bottom right corner of the row, and not the cell.
<table style="width:100%">
<tr>
<td valign="top" style="width:20%; position:relative">
<div>
//some controls here
</div>
<img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/>
</td>
<td valign="top" style="width:80%">
<div>
//control here
</div>
</td>
</tr>
<tr>
<td align="center" colspan="1" style="width: 20%">
//control here
</td>
<td align="center" colspan="2" style="width: 80%">
</td>
</tr>
<tr>
<td align="center" style="width:100%" colspan="2">
//control here
</td>
</tr>
</table>
Please help with this!!
Thanks.

I solved this problem by adding another row for the image and setting its alignment.
<tr>
<td style="width: 20%;" align="right" valign="bottom">
<asp:Image ID="Img1" runat="server" />
</td>
</tr>

I think you need to remove the position:relative of the parent td for this image as the absolute of the images is done relative to the td that has the position:relative
<table style="width:100%">
<tr>
<td valign="top" style="width:20%;">
<div>
//some controls here
</div>
<img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/>
</td>
<td valign="top" style="width:80%">
<div>
//control here
</div>
</td>
</tr>
<tr>
<td align="center" colspan="1" style="width: 20%">
//control here
</td>
<td align="center" colspan="2" style="width: 80%">
</td>
</tr>
<tr>
<td align="center" style="width:100%" colspan="2">
//control here
</td>
</tr>
</table>

any suggestions on this css print problem

I have this code on my print.css:
#header, #tae, #nav, .noprint {display: none;}
width: 100%; margin: 0; float: none;
In order not to display the elements within those div tags. But I don't know with the code below why it isn't cooperating. If I place the div tags on it. And then I hit the print button. I see no output.
Here it is:
<div id="tae">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1">
<tr>
<td class="text1" style="height: 50px;">xd627 information management system</td>
</tr>
<tr>
<td class="bg5"><table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;">
<tr align="center">
<td>Homepage</td>
<td>Database</td>
<td>About</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" class="bg6"> </td>
</tr>
<tr>
<td><table width="780" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="20"> </td>
<td width="297"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif" alt="" width="30" height="30" /></td>
</tr>
</tr>
<tr>
<td class="text2">
</div>
<div id="max">
<?php
//some php code in here showing a mysql table.
?>
</div>
What's wrong with my code? Does the php script depend on the one where I put the div tag in?
What do I do? All I want to show up in my page when printed is the mysql table. I'm using
Universal Document Converter to simulate printing.

The HTML in that snippet is broken and the entire document is contained in #tae, thus nothing will print as everything is in a container that is display: none;
Here's a cleaned up version of that markup.
<div id="tae">
<table border="0" align="center" cellpadding="0" cellspacing="0" class="bg1">
<tr>
<td class="text1" style="height: 50px;">xd627 information management system</td>
</tr>
<tr>
<td class="bg5">
<table border="0" cellspacing="0" cellpadding="0" style="height: 62px; padding-top: 15px;">
<tr align="center">
<td>Homepage</td>
<td>Database</td>
<td>About</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="bg6"> </td>
</tr>
<tr>
<td>
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="20"> </td>
<td width="297">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/spacer.gif" alt="" width="30" height="30" />
</td>
</tr>
<tr>
<td class="text2"></td>
</tr>
<!-- All this is missing, from here... -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- ...to here. -->
<div id="max">
<?php
//some php code in here showing a mysql table.
?>
</div>

Resources