I'm having css specificity issues.
I want the <td> style to be colored different if there are 'no bills', so I set the style with an if statement. If there are no bills, the style is style = "id=\"no-bills\"";. I got this to work with css. Now, if the user hovers over it, I want the background to go red - so I modified the css and added #bill-list #no-bills td:hover, which has td:hover to add some extra specificity when you hover over it. Unfortunately, this doesn't work (the background stays the same).
here's my css:
#bill-list
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
/*margin: 45px;*/
width: 100%;
text-align: left;
border-collapse: collapse;
}
#bill-list th
{
font-size: 13px;
font-weight: normal;
padding: 8px;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;
}
#bill-list td
{
padding: 8px;
background: #e8edff;
border-bottom: 1px solid #fff;
color: #669;
border-top: 1px solid transparent;
}
#bill-list tr:hover td
{
background: #d0dafd;
color: #339;
}
#bill-list #bill td
{
background: white;
}
#bill-list #no-bills
{
background: #FFCC99;
}
#bill-list #no-bills td:hover
{
color: orange;
background: red /*#FFCC66*/;
}
here's my code (snippet):
<table id="bill-list">
<thead>
<tr>
<% for (int i=0; i<vecHeader.size(); i++) { %>
<th><%=vecHeader.get(i) %></th>
<% } %>
</tr>
</thead>
<tbody>
<% int uniqueId = 0;
for (int i=0; i < vecValue.size(); i++) {
boolean hasBills = true;
String style = "";
if ( vecBills.get(i) == null || vecBills.get(i).size() == 0 ) {
hasBills = false;
style = "id=\"no-bills\"";
}
%>
<tr id="bill<%=i%>" onclick="javascript:showBillDetails(<%=i%>)">
<% for (int j=0; j < vecHeader.size(); j++) {
prop = (Properties)vecValue.get(i);
%>
<td <%=style%>><%=prop.getProperty((String)vecHeader.get(j), " ") %> </td>
<% } %>
</tr>
...
...
Anyone have any ideas?
You should post the HTML code, not the code that generates it, it's irrelevant here.
First problem: are you certain there can't be 2 no-bills id on the same page?
Then your problem: you're trying to style td:hover that is a descendant of #no-bills. The latter is the same td, not an ascendant! You should then style #bill-list #no-bills:hover, which appears to be a td being hovered.
try
#bill-list #no-bills:hover
instead of
#bill-list #no-bills td:hover
If there are multiple no-bills, you should use class over id.
Related
So I am creating a table in html using javascript. However, anytime I create the table, the first column is much larger than the second column, while the second column is extremely compressed.
I am trying to get the first column to be compressed and the second column to be the larger one, but for some reason it doesn't want to work.
let rankings2 = [];
function generateTableHead(table, data) {
let thead = table.createTHead();
let row = thead.insertRow();
for (let key of data) {
let th = document.createElement("th");
let text = document.createTextNode(key);
th.appendChild(text);
row.appendChild(th);
th.style.textAlign='center';
}
}
function generateTable(table, data){
for (let element of data) {
let row = table.insertRow();
for (key in element) {
let cell = row.insertCell();
let text = document.createTextNode(element[key]);
cell.appendChild(text);
cell.style.textAlign='center';
}
}
}
let HotSeat = [{pos: "1", name:"Ben Shapiro's Wife"},
{pos: "2", name: "Illegal Bookies"},
{pos: "3", name: "76ers"},
{pos: "4", name: "The Post Office",},
{pos: "5", name: "New Orleans"}];
let table2 = document.getElementById("HotSeatTable");
let data2 = Object.keys(HotSeat[0]);
generateTableHead(table2,data2);
generateTable(table2,HotSeat);
window.history.forward(1);
#HotSeat {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
margin: 0 auto;
width: 50%;
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}
#HotSeat td,
#HotSeat th {
border: 1px solid #ddd;
text-align: left;
width: 100%;
padding: 20px;
}
#HotSeat tr:nth-child(even) {
background-color: #f2f2f2;
}
#HotSeat tr:hover {
background-color: #ddd;
}
#HotSeat th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
width: left;
background-color: red;
color: white;
}
<div id="HotSeat">
<table id="HotSeatTable"></table>
</div>
here is what the table looks like when I dont have width: 100% in td,th
Remove width off the td selector. This is causing your columns to look skewed.
Then add width: 100% to get the table to fit the width of the container.
Additionally, I am not sure what you are trying to do with width: left property, so I would remove it. Same with the text-align: left in your style sheet, you set text-align: center dynamically in your JS, rendering left align useless unless you really want them left aligned.
#HotSeat {
border-collapse: collapse;
margin: 0 auto;
width: 50%;
}
#HotSeatTable {
width: 100%;
text-align: center;
}
#HotSeat td,
#HotSeat th {
border: 1px solid #ddd;
padding: 20px;
}
#HotSeat th {
padding-top: 12px;
padding-bottom: 12px;
background-color: red;
color: white;
}
<div id="HotSeat">
<table id="HotSeatTable">
<table id="HotSeatTable">
<tr>
<th>Pos</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Ben Shapiro's Wife</td>
</tr>
<tr>
<td>2</td>
<td>Illegal Bookies</td>
</tr>
<tr>
<td>3</td>
<td>76ers</td>
</tr>
<tr>
<td>4</td>
<td>The Post Office</td>
</tr>
<tr>
<td>5</td>
<td>New Orleans</td>
</tr>
</table>
</div>
I am trying to format the table to have rows separated by lines.Even tried using inline styles but nothing worked. Am I missing anything here?
Expected output :
Output I am getting :
Here is the perl code that I am using to generate the HTML for the email :
my $section_html = '';
$section_html.=qq(<table><tr style="border : 1px solid black;"><td>Hello1</td><td>Hello2</td></tr><tr style="border : 1px solid black;"><td>Hello3</td><td>Hello4</td></tr></table>);
my $email_html = <<EOF;
<html><head><style type="text/css">
body, td, th, strong { font-family: Verdana; font-size: 11px; }
table {
border:none;
border-collapse: collapse;
text-align:center;
}
table td {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
table th {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
table td:first-child {
border-left: none;
text-align:left;
}
table td:last-child {
border-right: none;
}
table tr{
border-top : 1px solid #000;
}
table tr{
border-top : 1px solid black;
}
</style></head>
<body bgcolor="#ffffff">
<span style="font-size: 20px">Report Header</span>$section_html</body></html>
EOF
# Write to file
open(FILE, ">/var/weekly_report/"."report"."_"."testing".".html") or die "Unable to open file for writing: $!\n";
print FILE $email_html;
close(FILE);
# Email weekly report
my $msg = MIME::Lite->new(
To => 'XXXX#somedomain.com',
Subject => 'Report subject',
Type => 'text/html',
Data => $email_html);
$msg->send();
This is going old school. Try this method as well. The difference from Ted's answer is, you have the whole table the same color and in his answer you can choose the border color for different td's or th's.
<table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="#000000">
<tbody>
<tr>
<td width="50%" bgcolor="#ffffff">Hello1</td>
<td width="50%" bgcolor="#ffffff">Hello1</td>
</tr>
<tr>
<td bgcolor="#ffffff">Hello1</td>
<td bgcolor="#ffffff">Hello1</td>
</tr>
</tbody>
</table>
Some email clients (and maybe browsers) don't allow us to directly style the <tr> tag. It's also safer to avoid relying on :first-child and :last-child pseudo selectors, as they are not well supported in email.
However you we can achieve your desired effect by styling the <table> and <td> tags:
table {
border-top: 1px solid #000;
border-right: 1px solid #000;
}
table td,
table th {
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
You can also have absolute control by inlining all CSS, which is still a good idea in HTML email.
I have a simple html table layout as:
<table class="grid">
<thead>
<tr><th>1st Col</th><th>2nd Col</th><th>3rd Col</th><th>4th Col</th></tr>
</thead>
<tbody>
<tr><td>AAAA</td><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
<tr><td>AAaa</td><td>BBbb</td><td>CCcc</td><td>DDdd</td></tr>
<tr><td>aaAA</td><td>bbBB</td><td>ccCC</td><td>ddDD</td></tr>
</tbody>
</table>
The background color of this table is defined in css:
table.grid > * > tr > * {
border-right: 4px groove #D1D1D1;
border-bottom: 4px groove #D1D1D1;
padding: 0;
background-color: #FFFFCC;
}
So, on load, the rows of this table are light yellow (#FFFFCC). While a user moves their cursor over the table, I want the color of the respective rows to change to give a highlight effect. I have used following jquery code to accomplish the highlighting effect:
$("body").on("mouseover mouseout",".grid > tbody > tr", function(){
$(this).toggleClass("highlight");
});
and the highlight class is in again in the same css file:
tr.highlight{
color: red;
font-style: italic;
background-color: green;
}
I found that, except for the background-color of the respective row, the font style and font color is changing. So the code is working to some extent but not completely.
But if I remove the background-color style from css, i.e, on load the table is white, the background-color of rows is changing to green while moving cursor over it:
table.grid > * > tr > * {
border-right: 4px groove #D1D1D1;
border-bottom: 4px groove #D1D1D1;
padding: 0;
//background-color: #FFFFCC;<--- I have to remove this line
}
Do you have any idea, how can I change the rows color if it is already given a background-color on load?
Those CSS selectors are really bad, and you don't need JS for the hover effect. Simplify it.
tr.highlight won't affect anything since you're setting the background color to the children of tr, not the tr itself.
Also, read about CSS specificity.
Here's a working code:
table.grid tr td {
border-right: 4px groove #D1D1D1;
border-bottom: 4px groove #D1D1D1;
padding: 0;
background-color: #FFFFCC;
}
table.grid tr:hover td{
color: red;
font-style: italic;
background-color: green;
}
<table class="grid">
<thead>
<tr><th>1st Col</th><th>2nd Col</th><th>3rd Col</th><th>4th Col</th></tr>
</thead>
<tbody>
<tr><td>AAAA</td><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
<tr><td>AAaa</td><td>BBbb</td><td>CCcc</td><td>DDdd</td></tr>
<tr><td>aaAA</td><td>bbBB</td><td>ccCC</td><td>ddDD</td></tr>
</tbody>
</table>
I have a dynamically generated table in an asp.net View
I have used the same code to print another table and it prints..lines and all..
but when i try to print this table i get only the text and no html
here is my code..(i dont have the reputation to post screenshots)
#model AECS1.Controllers.DailyReportModel
#{
ViewBag.Title = "AECS : Daily Report";
}
<html>
<head>
<style >
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
width: 400px;
}
table.gridtable th {
padding: 8px;
border: 1px solid #666666 ;
background-color: #23819C;
color:white;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
}
.aclass {
background-color: #23819C;
color: white;
font-size: 25px;
padding: 2px 2px 2px 2px;
height: 5%;
display: block;
text-decoration: none;
margin-left:10%;
width:10%;
}
</style>
<style media="print">
td,th
{color:black}
</style>
<script>
function printer() {
var divToPrint = document.getElementById("printable");
newWin = window.open("");
newWin.document.write("<h1>Weekly Report</h2>")
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
</script>
</head>
<body>
<div style="text-align:center">
<h2>Daily Report</h2>
<button id="print" onclick="printer()" class="aclass">print</button>
<h3>#ViewBag.date</h3>
#using (Html.BeginForm())
{
#Html.TextBoxFor(m => m.Report_Date, new { #class = "input1", #id = "datepicker", #readonly = "readonly" })
<br />
<input type="submit" value="Get Report" />
#Html.ValidationSummary()
}
#{
int i = 0;
}
<div id="printable">
<table align="center" >
#foreach (var item in ViewBag.list){
i++;
if (#i % 3 == 1)
{
#:<tr>
}
<td>
<table class="gridtable">
<tr>
<th>
UNIT NAME
</th>
<th>
DOCTOR NAME
</th>
<th>
STATUS
</th>
</tr>
#foreach (var item1 in item)
{
<tr>
<td>
#item1.UnitName
</td>
<td>
#item1.dr_name
</td>
<td>
#item1.info
</td>
</tr>
}
</table>
</td>
if (#i % 3 == 0)
{
#:</tr>
}
}
</table>
</div>
</div>
</body>
</html>
I was suffered from same problem, i got issue why it was not print the table border?
It because of CSS : "border-collapse: collapse;"
So what i do is use #media and write CSS as below for screen and print.
In your case do as :
#media screen {
table.gridtable
{
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
width: 400px;
}
}
and for print :
#media print{
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
width: 400px;
}
}
in print remove CSS line border-collapse: collapse;
Because this is reason for disappearing border in printing.
Hope this work for you.
Store the css in an external stylesheet, say style.css
Link to the printing window.
newWin.document.write('<link rel="stylesheet" href="images/style.css" type="text/css" />');
OR
write the CSS within the DIV (< div id="printable" >) which going to print.
In your code the css part is outside . It should be within the div
The table is being copied to a new window, and your CSS is not being retained.
Pass some relevant CSS across to the new window in your document.write() method.
Like This
$("#printtbl").on('click', function() {
var printContents = document.getElementById('print-table').innerHTML;
var originalContents = document.body.innerHTML;
// Your Css
var htmlToPrint = '' +
'<style type="text/css">' +
'table {' +
'border-spacing: 0;' +
'border-collapse: collapse;' +
'}'+
'table tr {' +
'border-top: 1px solid gray !important;' +
'}' +
'</style>';
htmlToPrint += printContents;
var printWindow = window.open('', 'PRINT');
printWindow.document.write(htmlToPrint);
printWindow.print();
printWindow.close();
}
I have a table with expand/collapse div elements in td.
When expanding in IE9, all is OK, but in Google Chrome (version 16.0.912.75 m) I get unexpected solid borders on differing spots.
It seems as if the colspan=3 tr's have something to do with this, as the solid borders appear above and under those. Also, the div width values seem to influence this: the behavior changes when choosing other values for these.
See below html. I added 4screen prints: initial view, expand row1, expand row2, expand both.
What is causing this odd behavior and how can I prevent it?
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<title>Example</title>
<style type="text/css">
table {
border: solid black 1pt;
border-collapse: collapse;
padding: 0;
border-spacing: 0;
}
th {
background: rgb(255, 255, 153);
border-style: solid;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
vertical-align: top;
}
td {
border-style: dotted dotted none none;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-style: normal;
font-family: Verdana;
font-size: 10pt;
vertical-align: top;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
div.QUAL {
margin-left:4pt;
font-size: 90%;
}
input.buttonQUAL {
color: blue;
background: white;
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
div.listQUALdesc {
color: black;
background: white;
font-size: 100%;
}
</style>
<script type="text/javascript" language="javascript">
//expand and collapse functions based on id
function toggleMe(a){
var e = document.getElementById(a);
if(!e) return true;
if( e.style.display == "none")
{
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
};
function expandByIdStart(IdStart){
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
if (divs[i].id.match("^"+IdStart) == IdStart) {
divs[i].style.display = "block";
}
}
return true;
}
function collapseByIdStart(IdStart){
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
if (divs[i].id.match("^"+IdStart) == IdStart) {
divs[i].style.display = "none";
}
}
return true;
}
</script>
</head>
<body>
<p/>
<table style='table-layout:fixed word-break:break-all'>
<col width="70"><col width="70"><col width="70">
<thead><tr><th>Col1</th><th>Col2</th><th>Col3</th></tr></thead>
<tbody>
<tr>
<td>
<input
type="button"
class="buttonQUAL"
onclick="toggleMe('row1'); return true;"
onMouseOver="this.style.cursor='hand'"
value="row1"/>
</td>
<td>text1
<div id="row1" class="listQUALdesc" style="width:100; display:none">
text2
</div>
</td>
<td></td>
</tr>
<tr>
<td><div class="QUAL">xxx</div></td>
<td>text3</td>
<td></td>
</tr>
<tr>
<td colspan="3">Start</td>
</tr>
<tr>
<td>
<input
type="button"
class="buttonQUAL"
onclick="toggleMe('row2'); return true;"
onMouseOver="this.style.cursor='hand'"
value="row2"/>
<div id="row2" class="QUAL" style="display:none;width:65">
text5<br/>
</div>
</td>
<td>text4</td>
<td></td>
</tr>
<tr>
<td colspan="3">End</td>
</tr>
</tbody>
</table>
</body>
</html>
See comments - adding < !doctype html > partly solves the issue
Addition
There are some issues to be found on the web that point at an error in Chrome and Safari (which use webkit) like the following: webkit-colspan-table-border-bug.
It seems that using colspan and bottom-border in combination with border-collapse: collapse leads to border display issues, just as in my example.