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.
Related
I have a textarea in the td cell of each row in column 3, to hold description specific to each row.
When the user clicks on the td, the current description in the textarea inside the td should be copied over to the textarea inside #div_toggle
Here is what I am trying to accomplish.
The user would make changes to the description in #div_toggle, and when done, will click 'X' to close the div. This should cause the contents to be transferred from the textarea in #div_toggle to the td cell textarea.
Would you be able to help me achieve this goal? Or am I complicating this? Is there a better approach?
Below is the code I have thus far, but it does not work as desired or described above. Please help.
Best regards.
<!DOCTYPE html>
<html>
<head>
<style>
th,
td {
border: solid 1px lightgrey;
}
#div_toggle {
display: none;
border: 1px solid black;
margin: 10px;
}
#div_toggle textarea {
width: 200px;
height: 150px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
}
#close_text {
position: absolute;
right: 27px;
cursor: pointer;
padding: 5px;
background: #cfd0d1;
border-radius: 4px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function() {
//Show textarea
$('.cell_id').click(function() {
$('#div_toggle').slideToggle('slow');
});
//Close textarea
$('#close_text').click(function() {
var tbl = $('#itemtable');
var rows = $('tr', tbl);
//get toggle div text area contents into td cell textarea
rows.eq(clickedrowindex).find('td:nth-child(3)').text() = $('#div_toggle textarea#notescopy').val();
$('#div_toggle').slideToggle('slow');
});
var clickedrowindex;
$('#itemtable').find('tr').click( function(){
clickedrowindex = $(this).closest('tr').index();
//get td cell textarea contents into the toggle div text area
var notestext = $(this).find('td:nth-child(3)').text();
$('#div_toggle textarea#notescopy').val(notestext);
});
});
</script>
</head>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
</tbody>
</table>
<div id="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
</html>
You do not need that much of code and its can simplified to just two functions to achieve your desired results.
Firstly, we just need to make sure that we save the our current target (td > textarea) in variable and use that variable to assign val to the textarea accordingly.
Also, we need to use a class .div_toggle selector not an id #div_toggle - Since id will only pick the element which is found firstly but in our case we need to change value dynamically on each slideDown and SlideUp event.
Lastly, for this you need to use slideDown and slideUp on X button click. Its work the same way as slideToggle. Using slideToggle will create a weird behaviour.
When you click the X the content you typed in the toggle div textarea will be transfered to the td you clicked on as your target
Live Working Demo:
$(document).ready(function() {
let currentTar; //save current target
let divToggle = $('.div_toggle') //get element
//Show textarea
$('.cell_id').click(function(event) {
currentTar = event.currentTarget
divToggle.slideDown('slow');
let getText = $(this).find('textarea').val()
divToggle.find('textarea').val(getText)
});
//Close textarea
$('#close_text').click(function() {
divToggle.slideUp('slow');
let assignVal = divToggle.find('textarea').val();
$(currentTar).find('textarea').val(assignVal)
});
});
th,
td {
border: solid 1px lightgrey;
}
.div_toggle {
display: none;
border: 1px solid black;
margin: 10px;
}
.div_toggle textarea {
width: 200px;
height: 150px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
}
#close_text {
position: absolute;
right: 27px;
cursor: pointer;
padding: 5px;
background: #cfd0d1;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'>Test</textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'>Foo</textarea></td>
</tr>
<tr>
<td> 2040</td>
<td> Elon Musk</td>
<td class='cell_id'><textarea name='reqnotes'>Tesla</textarea>
</td>
</tr>
</tbody>
</table>
<div class="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
A few minor changes. Utilize $(this).val() instead of doing a find for the closest :)
You'll notice the code is much cleaner as well.
$(document).ready(function() {
$("textarea").click(function(){
var contents = $(this).val();
$('#notescopy').val(contents);
});
//Show textarea
$('.cell_id').click(function() {
$('#div_toggle').slideToggle('slow');
});
//Close textarea
$('#close_text').click(function() {
$('#div_toggle').slideToggle('slow');
});
});
th,
td {
border: solid 1px lightgrey;
}
#div_toggle {
display: none;
border: 1px solid black;
margin: 10px;
}
#div_toggle textarea {
width: 200px;
height: 150px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
}
#close_text {
position: absolute;
right: 27px;
cursor: pointer;
padding: 5px;
background: #cfd0d1;
border-radius: 4px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
</tbody>
</table>
<div id="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
</html>
I want to change th, td values-based values ..suppose align numbers to right(except s.no) and text to left.
<button type="submit" class="btn btn-raised btn-primary mr-5"
(click)="productPrintSection('productSection')">
<i class="fa fa-check-square-o"></i> Print
</button>
my Html code is bellow and these data getting dynamically ...
<div id="invoice-items-details" class="pt-2">
<div class="row">
<div class="table-responsive col-sm-12">
<table class="table">
<thead>
<tr>
<th
*ngFor="let column of productColumns">
{{column.name}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let list of productSource; let i=index">
<td
*ngFor="let column of productColumns">
{{ list[column['value']] }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
my print section code is
productPrintSection = function (reportSection) {
let printContents, popupWin;
printContents = document.getElementById(reportSection).innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<style>
body { width: 99%;}
h1 {
text-align:center;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
label { font-weight: 400;
font-size: 13px;
padding: 2px;
margin-bottom: 5px;
}
table, td, th {
border: 1px solid silver;
}
table td {
text-align: center;
font-size: 13px;
}
table th {
font-size: 13px;
}
table {
border-collapse: collapse;
width: 98%;
}
th {
height: 26px;
}
</style>
</head>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}
my output screen
could u please suggest me how to show align of numbers to right(except s.no) and text to left.
well I could not find any css selector for selecting specific cells with numbers in them. That's why I've made a javascript function to check whether the cellmate can be converted to a number or not with !isNaN(col.innerText). Just call the styleTable function whenever you need it.
The following snippet contains an example based on the by you provided code.
var table = document.getElementById("products");
window.onload = function() {
styleTable(table)
};
function styleTable(table) {
//loop through the second row to check what kind of value they have
for (var i = 1, row; row = table.rows[i]; i++) {
//exclude the first column "S.no"
for (var j = 1, col; col = row.cells[j]; j++) {
//check if the column value is a number
if (!isNaN(col.innerText)) {
col.style.textAlign = "right";
}
}
}
}
body {
width: 99%;
}
h1 {
text-align: center;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
label {
font-weight: 400;
font-size: 13px;
padding: 2px;
margin-bottom: 5px;
}
table,
td,
th {
border: 1px solid silver;
}
table td {
text-align: center;
font-size: 13px;
}
table th {
font-size: 13px;
}
table {
border-collapse: collapse;
width: 98%;
}
th {
height: 26px;
}
<table id="products">
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product code</th>
<th>Purity</th>
<th>Store</th>
<th>city</th>
<th>state</th>
<th>quantity</th>
<th>weight</th>
<th>total</th>
<th>total orders</th>
</tr>
<tr>
<td>1</td>
<td>xyzzy</td>
<td>1001010</td>
<td>54.00</td>
<td>Default</td>
<td>Hyderabad</td>
<td>dashdsaf</td>
<td>10</td>
<td>2135.5000</td>
<td>239280324.09</td>
<td>12</td>
</tr>
<tr>
<td>2</td>
<td>xyzzy</td>
<td>1001010</td>
<td>54.00</td>
<td>Default</td>
<td>Hyderabad</td>
<td>adsfsdf</td>
<td>0</td>
<td>2135.5000</td>
<td>239280324.09</td>
<td>13</td>
</tr>
</table>
Hope this helps!
Edit:
Provided a more dynamic way of styling each cell accordingly.
For some reason my tr borders aren't showing internally, I have no idea why and have never had an issue with it? Its meant to be a dynamic table where an x and a y value can be placed within an input and it then creates it.
html:
<body>
<label id="h">x :</label>
<input type="number" id="width">
<label id="w">y :</label>
<input type="number" id="length">
<input type="submit" id="submit">
<table style="width:40%" id="table">
</table>
<script type="text/javascript" src="TableGenerator.js"></script>
</body>
css:
body{
background-color:#929caa;
}
#w{
color:white;
}
#h{
color:white;
}
table{
background-color:#d5dce5 ;
border-collapse: separate;
position: fixed;
margin-top: 10px;
color: black;
}
tr{
border: 1px solid black;
}
JS: (Column insertion is sill in process)
var submit = document.getElementById("submit");
submit.addEventListener("click", function(){
InsertNewRow();
InsertNewCol();
})
function InsertNewRow () {
for (var i = 0; i < document.getElementById("width").value; i++) {
var table = document.getElementById ("table");
var row = table.insertRow (-1);
row.className = "row";
row.innerHTML = "New Row";
}}
function InsertNewCol(){
}
tr border works only with border-collapse: collapse not with separate. So try to change border-collapse value to collpase in table css
table {
background-color: #d5dce5;
border-collapse: collapse;
position: fixed;
margin-top: 10px;
color: black;
}
tr {
border: 1px solid black;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
Try border-collapse: collapse; it will show the lines between the rows.
The snippet below actually produces a table similar to what I want when it runs here, but the output RTF file shows a different table without the inside borders. How could this be?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="Generator" content="SAS Software Version 9.3, see www.sas.com">
<meta http-equiv="Content-type" content="text/html; charset=windows-1252">
<title>SAS Output</title>
<style type="text/css">
<!--
.table {
color: #000000;
font-family: 'Arial', 'Arial';
font-size: 10pt;
font-style: normal;
font-weight: normal;
border: medium double black;
}
.proctitle{
color: #000000;
font-family: Arial, 'Albany AMT', Arial;
font-size: x-small;
font-style: normal;
font-weight: bold;
}
.systemtitle{
font-family: Arial, 'Albany AMT', Arial;
font-size: large;
font-weight: 14pt;
color: black;
}
.header, .rowheader, .footer, .rowfooter{
color: black;
font-size: 10pt;
font-family: Arial, 'Albany AMT', Arial;
background-color: #ffffff;
font-weight: bold;
text-align: center;
vertical-align: middle;
padding: 10px;
}
.data{
font-size: 10pt;
font-family: Arial, 'Albany AMT', Arial;
background-color: #ffffff;
text-align: center;
vertical-align: middle;
padding: 10px;
}
.l {text-align: left }
.c {text-align: center }
.r {text-align: right }
.d {text-align: right }
.j {text-align: justify }
.t {vertical-align: top }
.m {vertical-align: middle }
.b {vertical-align: bottom }
TD, TH {vertical-align: top }
.stacked_cell{padding: 0 }
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function startup(){
}
function shutdown(){
}
//-->
</script>
</head>
<body onload="startup()" onunload="shutdown()" class="body">
<script language="javascript" type="text/javascript">
<!--
var _info = navigator.userAgent
var _ie = (_info.indexOf("MSIE") > 0
&& _info.indexOf("Win") > 0
&& _info.indexOf("Windows 3.1") < 0);
var _ie64 = _info.indexOf("x64") > 0
//-->
</script>
<div class="branch">
<a name="IDX"></a>
<table class="systitleandfootercontainer" width="100%" cellspacing="1" cellpadding="1" rules="none" frame="void" border="0" summary="Page Layout">
<tr>
<td class="c systemtitle">Example Title Here</td>
</tr>
</table><br>
<div>
<div align="center">
<table class="table" cellspacing="0" cellpadding="5" rules="all" frame="box" bordercolor="#C1C1C1" summary="Procedure Print: Data Set WORK.TEST">
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th class="l header" scope="col">CAR</th>
<th class="r header" scope="col">YEAR</th>
</tr>
</thead>
<tbody>
<tr>
<td class="l data">FORD</td>
<td class="r data">1995</td>
</tr>
<tr>
<td class="l data">HONDA</td>
<td class="r data">1998</td>
</tr>
<tr>
<td class="l data">CHEVY</td>
<td class="r data">2001</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
</div>
</body>
</html>
However, this produces a table as such:
I'd like for it to look like:
I created the following dataset and used ODS RTF and my custom .css file (in this example, called TESTFOX) to output the table:
DATA TEST;
INPUT CAR $10. YEAR;
DATALINES;
FORD 1995
HONDA 1998
CHEVY 2001
;
RUN;
ODS RTF FILE="C:\USERS\DOCUMENTS\TEST.RTF" CSSSTYLE='C:\USERS\DOCUMENTS\TESTFOX.CSS';
PROC PRINT DATA=TEST NOOBS;
RUN;
ODS _ALL_ CLOSE;
Use the nth child selector. Css below may work depending on your html structure.
tr:first-child {
border-top: medium double black;
}
tr:first-child {
border-bottom: medium double black;
}
td:first-child {
border-left: medium double black;
}
td:last-child {
border-right: medium double black;
}
EDIT
After the original poster added some details, here is a possible way to get the inner border.
td, th {
border: thin solid black;
}
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();
}