I'm trying to get an email to fire alerting me if a column in a Google Sheet =X.
I've tried using the notification system using using the EQ operator to turn on when a cell equals X, this changes a cell and the notification system is supposed to send an email right away. It's not working that way, the email never fires.
I'm think I need a script that would fire an email if a cell =X which would be nice because I could customize the email so it made more sense. (i.e. "The conference room your event is being held has reached capacity, you should remove it from the reservation form")
I am new to Google Scripts and could use a little help creating the email trigger if cell =X script.
Thanks,
Dave
You would need to add a script to run onEdit.
function onEdit() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("NameOfYourSheet");
var currentValue = sheet.getRange("A5").getValue();
if (currentValue == (whateverValueYoureLookingFor)) {
MailApp.sendEmail("youremail#domain.com", "ALERT: The cell in the sheet is equal to X!", "The message body that you want to send.");
}
}
function testSchemas() {
var htmlout = HtmlService.createTemplateFromFile('data').evaluate().getContent();
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('All Exams Tracker');
var range = sheet.getDataRange();
var values = range.getValues();
var last_row = sheet.getLastRow();
var today = new Date()
for (var i =3 ;i < last_row;i++) {
var temp = values[i][4];
var e_date = new Date(temp);
if ((( e_date - today)/(1000*60*60*24)) < 10 && e_date > today){
var cond = "done" }
break; }
Logger.log(cond);
if (cond == "done"){
MailAppv.sendEmail({
to: '*************************************************************',
subject: 'Exam Coming Next Week',
htmlBody: htmlout,
});
}}
This will html file data (given below) when triggered.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<table style = "border: 1px solid black; border-style: collapse;">
<? var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('All Exams Tracker');
var range = sheet.getDataRange();
var values = range.getValues();
var last_row = sheet.getLastRow();
var today = new Date();?>
<tr style="border: 1px solid black; padding: 10px;">
<th style="border: 1px solid black; padding: 10px;">Exam Name</th>
<th style="border: 1px solid black; padding: 10px;">Exam Date</th>
<th style="border: 1px solid black; padding: 10px;">Priority</th>
<th style="border: 1px solid black; padding: 10px;">College Predictor Status</th>
<th style="border: 1px solid black; padding: 10px;">Rank Predictor Status</th>
</tr>
<? for (var i =3 ;i < last_row;i++) {
var temp = values[i][4];
var e_date = new Date(temp);
if ((( e_date - today)/(1000*60*60*24)) < 10 && e_date > today) {
if (values[i][12] != ""){
var col_status = "Live"}
else
if (values[i][11] != ""){
col_status = "Uploaded and Tested"}
else
if (values[i][10] != ""){
col_status = "Data Processed"}
else
if (values[i][9] != ""){
col_status = "Template Ready"}
else
col_status = "Not initiated yet"
if (values[i][19] != ""){
var rank_status = "Live"}
else
if (values[i][18] != ""){
rank_status = "Uploaded and Tested"}
else
if (values[i][17] != ""){
rank_status = "Data Processed"}
else
rank_status = "Not Initiated yet"
?>
<tr>
<td style="border: 1px solid black; padding: 10px;"><?= values[i][2]?></td>
<td style="border: 1px solid black; padding: 10px;"><?= values[i][4]?></td>
<td style="border: 1px solid black; padding: 10px;"><?= values[i][8]?></td>
<td style="border: 1px solid black; padding: 10px;"><?= col_status?></td>
<td style="border: 1px solid black; padding: 10px;"><?= rank_status?></td>
</tr>
<? } }?>
</table>
<br><br>
<p>Click Here For More Details</p>
</html>
Related
I have created in data-table using bootstrap.
I have used data-table in ionic 3 website.
But problem was I use edit button in data-table
then first time it is working good .
After searching record it can not working click and not call method.
I'm get stuck please help me to solve this issue.
branch.html
<ion-content class="bgimg">
<ion-grid style="color: aliceblue">
<ion-row>
<ion-col col-8></ion-col>
<!--<ion-col col->-->
<!--</ion-col>-->
<ion-col col-2> <button float-end ion-button outline color="editcolor" style="color: white" (click)="addbranch()">Add</button></ion-col>
<ion-col col-1></ion-col>
</ion-row>
<ion-row>
<ion-col col-2></ion-col>
<ion-col col-8>
<div *ngIf="checkdatatable">
<table id="example12">
<thead>
<tr>
<th text-capitalize style="border: 1px solid rgba(255,255,255,1);" width="20%">Image</th>
<th style="border: 1px solid rgba(255,255,255,1);">name</th>
<th style="border: 1px solid rgba(255,255,255,1);">address</th>
<th style="border: 1px solid rgba(255,255,255,1);" >phone</th>
<th style="border: 1px solid rgba(255,255,255,1);" >pincode</th>
<th style="border: 1px solid rgba(255,255,255,1);" text-capitalize>Action</th>
</tr>
</thead>
<tfoot>
<tr >
<th text-capitalize style="border: 1px solid rgba(255,255,255,1);">Image</th>
<th style="border: 1px solid rgba(255,255,255,1);">name</th>
<th style="border: 1px solid rgba(255,255,255,1);" width="15%">address</th>
<th style="border: 1px solid rgba(255,255,255,1);" >phone</th>
<th style="border: 1px solid rgba(255,255,255,1);" >pincode</th>
<th style="border: 1px solid rgba(255,255,255,1);" text-capitalize width="20%">Action</th>
</tr>
</tfoot>
<tbody>
<tr style=" background:rgba(0,0,0,0.0); color: white;font-size: 16px" *ngFor="let item of branchlist" >
<td style="border: 1px solid rgba(255,255,255,0.5);">
<img src="{{item.image}}" height="100px">
</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.name}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.address}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.phone}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">{{item.pincode}}</td>
<td style="border: 1px solid rgba(255,255,255,0.5);">
<!--<input type="hidden" id="idmain" value="{{item._id}}">-->
<button color="editcolor" ion-button (click)="updatebranch(item._id)">Edit</button>
<button color="deletecolor" ion-button (click)="deletebranch(item._id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</ion-content>
branch.ts
import { Component } from '#angular/core';
import {
AlertController, IonicPage, LoadingController, NavController, NavParams, ToastController, ModalController,
App
} from 'ionic-angular';
import {WebserviceallProvider} from "../../providers/webserviceall/webserviceall";
import { Storage } from '#ionic/storage';
import {LoginPage} from "../login/login";
/**
* Generated class for the BranchesPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-branches',
templateUrl: 'branches.html',
})
export class BranchesPage {
resposnsdata:any;
branchlist:any;
checkdatatable:boolean=false;
branchname = {name:''};
branchupdatedata = {name:''};
constructor(private storage: Storage,private app:App,public modalCtrl: ModalController,private alertCtrl: AlertController,private calldata:WebserviceallProvider,public navCtrl: NavController, public navParams: NavParams,public loadingCtrl: LoadingController,private toastCtrl: ToastController)
{
storage.get('token').then((val) => {
console.log('Your Token is', val);
if(val === null || val === "non")
{
this.app.getRootNav().setRoot(LoginPage);
}
});
this.getshow();
}
ionViewEnter(){
this.getshow();
}
myFunction(name) {
document.getElementById("demo").innerHTML =
"Welcome " + name;
}
getshow(){
//this.presentLoading();
this.calldata.branchlist().then((result) => {
this.branchlist = [];
this.resposnsdata = result;
console.log(this.resposnsdata);
this.branchlist = this.resposnsdata.data;
$(document).ready(function () {
// alert("call aklsdaklsd");
$('#example12').DataTable();
});
this.checkdatatable=true;
//check user name
//console.log("print login Response >>"+this.resposnsdata);
if (this.resposnsdata.status === 200) {
}
else
{
this.presentToast(this.resposnsdata.message);
}
}, (err) => {
console.log("Error Block Call");
this.presentToast("Server Problem");
});
}
presentLoading() {
let loader = this.loadingCtrl.create({
content: "Please wait...",
duration: 2000
});
loader.present();
}
presentToast(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 2000,
position: 'bottom'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
ionViewDidLoad() {
console.log('ionViewDidLoad BranchesPage');
}
deletebranch(bid){
console.log(bid);
//this.presentLoading();
this.calldata.branchdelete(bid).then((result) => {
this.resposnsdata = result;
console.log(this.resposnsdata);
this.getshow();
//check user name
//console.log("print login Response >>"+this.resposnsdata);
if (this.resposnsdata.status === 200) {
}
else
{
this.presentToast(this.resposnsdata.message);
}
}, (err) => {
console.log("Error Block Call");
this.presentToast("Server Problem");
});
}
addbranch() {
var modalPage = this.modalCtrl.create('MAddbranchPage');
modalPage.present();
modalPage.onDidDismiss(data=>{
this.getshow();
});
}
updatebranch(id){
console.log("edit call");
var dataid = {
bid:id
};
var modalPage = this.modalCtrl.create('MEditbranchPage',{data:dataid});
modalPage.present();
modalPage.onDidDismiss(data=>{
this.getshow();
});
}
}
ion-button only support in cordova, in other words, you must enable cordova for browser or just simple remove ion-button
<button color="editcolor" (click)="updatebranch(item._id)">Edit</button>
<button color="deletecolor" (click)="deletebranch(item._id)">Delete</button>
i am working in HTML to PDF conversion using ItextPdf 5.5.1 and XMLWorker 5.5.1 in Java.
i managed to convert PDF document having height as that of HTML contents but contents in PDF looking bigger and having unwanted spaces between lines. These spaces are not there in HTML document.
private static void createPdf() {
try {
// getting HTML file from the path
InputStream is = new FileInputStream(new File("/Users/salman.nazir/Desktop/html/tq.txt"));
Date now = new Date();
File file = new File(("/Users/salman.nazir/Desktop"), "my_" + now.getTime() + ".pdf");
ElementList el = parseToElementList(is, new XMLWorkerFontProvider("resources/fonts/"));
// width of 204pt
float width = 204;
// height as 10000pt (which is much more than we'll ever need)
float max = 10000;
//column without a `writer`
ColumnText ct = new ColumnText(null);
ct.setSimpleColumn(new Rectangle(width, max));
for (Element e : el) {
// Add only HTML Body Element
// Avoiding IllegalArgumentException ("Format not found.")
if(!e.isContent()) {
System.out.print("META DATA");
}
else {
ct.addElement(e);
}
}
ct.go(true);
// Getting y posItion from simulation mode
float y = ct.getYLine();
Rectangle pagesize = new Rectangle(width, (max - y) + 25);
// Document with predefined page size
Document document = new Document(pagesize, 0, 0, 0, 0);
// Getting PDF Writer
PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream(file));
document.open();
// Column with a writer
ct = new ColumnText(writer.getDirectContent());
ct.setSimpleColumn(pagesize);
for (Element e : el) {
// Add only HTML Body Element
// Avoiding IllegalArgumentException ("Format not found.")
if(!e.isContent()) {
System.out.print("META DATA");
}
else {
ct.addElement(e);
}
}
ct.go();
// closing the document
document.close();
showPDFPath(file.getAbsolutePath());
} catch (Exception e) {
e.printStackTrace();
}
}
is there any thing to set resolution anywhere in the code ? here is HTML code that is working fine in browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>Lieferschein/Rechnung 27.03.17 11:18 2017/2432</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
#font-face {
font-family: "Roboto Mono";
src: url('RobotoMono-Bold.ttf') format('ttf'), url('RobotoMono-BoldItalic.ttf') format('ttf'), url('RobotoMono-Italic.ttf') format('ttf'), url('RobotoMono-Light.ttf') format('ttf'), url('RobotoMono-LightItalic.ttf') format('ttf'), url('RobotoMono-Medium.ttf') format('ttf'), url('RobotoMono-MediumItalic.ttf') format('ttf'), url('RobotoMono-Regular.ttf') format('ttf'), url('RobotoMono-Thin.ttf') format('ttf'), url('RobotoMono-ThinItalic.ttf') format('ttf');
}
body {
font-family: "Roboto Mono";
font-size: 2pt;
width: 100%;
margin: 0pt;
}
.documentType {
text-transform: uppercase;
}
h1 {
text-align: center;
font-size: 16pt;
font-weight: normal;
}
h2 {
text-align: center;
font-size: 10pt;
font-weight: normal;
margin: 0pt;
}
tr.manual_imprint td {
border-bottom:1pt dotted black;
height: 30pt;
vertical-align: bottom;
}
h3 {
text-align: center;
font-size: 13pt;
font-weight: normal;
}
h3.left {
font-size: 13pt;
text-align: left;
}
hr {
height: 1pt;
color: black;
background-color: black;
border: 0pt;
}
table {
width: 100%;
border: 0pt;
padding: 0pt;
border-spacing: 0pt;
}
tr.lineitem_head td {
border-bottom:1pt solid black;
}
tr.total td {
border-top:1pt solid black;
border-bottom:3pt double black;
font-size: 6pt;
font-weight: bold;
}
td {
overflow: hidden;
}
td.left {
max-width: 1px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
td.left_indent {
text-align: left;
padding-left: 7pt;
}
td.right {
text-align: right;
vertical-align: top;
white-space: nowrap;
}
.image-container {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1>Tischlerei Helmut Meyer_676647</h1>
<h2>Winsener Landstrasse 22</h2>
<br></br>
<div class="image-container"><img src="http://www.iconsdb.com/icons/download/gray/android-6-512.jpg"/> </div> <h2>21423 Winsen / Luhe</h2>
<h2></h2>
<h2>Tel.: +4940441777</h2>
<h3 class="left documentType">Lieferschein/Rechnung</h3>
<table class="order">
<tr class="lineitem_head">
<td>Nr. 2017/2432</td>
<td class="right">27.03.17 11:18</td>
</tr>
</table>
<table class="lineitems">
<colgroup>
<col width="100%" />
<col width="0%" />
</colgroup>
<tbody>
<tr class="lineitem" data-net="3,78 €">
<td class="left">1x Filter Kalita</td>
<td class="right">4,50 €</td>
</tr>
<tr class="lineitem" data-net="3,03 €">
<td class="left">1x Latte</td>
<td class="right">3,60 €</td>
</tr>
<tr class="lineitem" data-net="7,38 €">
<td class="left">1x Skywalker/250g</td>
<td class="right">7,90 €</td>
</tr>
<tr class="lineitem" data-net="8,32 €">
<td class="left">1x Playground Love</td>
<td class="right">8,90 €</td>
</tr>
<tr class="lineitem" data-net="12,06 €">
<td class="left">1x Dschaggah Khan</td>
<td class="right">12,90 €</td>
</tr>
<tr class="lineitem" data-net="12,06 €">
<td class="left">1x King Kongo</td>
<td class="right">12,90 €</td>
</tr>
</tbody>
<tfoot>
<tr class="total">
<td class="left">Total</td>
<td class="right">50,70 €</td>
</tr>
<tr class="net">
<td class="left">Netto</td>
<td class="right">46,62 €</td>
</tr>
<tr class="tax">
<td class="left">7,00 VAT</td>
<td class="right">2,79 €</td>
</tr>
<tr class="tax">
<td class="left">19,00 VAT</td>
<td class="right">1,29 €</td>
</tr>
</tfoot>
</table>
<h3>Vielen Dank für Ihren Besuch!</h3>
<h2>St-Nr.: </h2>
</body>
</html>
Your issue is due to print resolution used in the parser which, by default is 72. You should design for that resolution instead of 100 or any other resolution (ie: If you'll be printing PDFs of letter size (8.5in x 11in), instead of designing for 850px by 1100px, you should do it on 612px x 792px.
I run into a problem while tring to add new row to Table.
The problem is the new row is added into blcok rather than block.
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
table{
border: 1px solid #ccc;
}
<table id="myTable">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
</tr>
</thead>
<tbody>
//new row is supposed to add into here.
<tbody>
</table>
<br>
<button onclick="myFunction()">Try it</button>
Thanks for any help.
You wanted to add new row to tbody, so select tbody first using getElementsByTagName("tbody") on . Also use insertRow(0) instead of insertRow(1)
function myFunction() {
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName('tbody');
console.log(tbody)
var row = tbody[0].insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
table{
border: 1px solid #ccc;
}
<table id="myTable">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
</tr>
</thead>
<tbody>
//new row is supposed to add into here.
<tbody>
</table>
<br>
<button onclick="myFunction()">Try it</button>
Implemented this on our site about a month ago and it was working perfectly. Today, suddenly, I am getting this error on all pages that have the auto complete. I created a blank page with nothing but the example code copy pasted from Google's Docs, and I still get the error. Yet on Google's site, the example works.
The error is:
ReferenceError: V is not defined
...,function(a,b){V("places_impl",N(this,function(){this.Sa.getDetails(a,b)}))});G....
Here is the code, straight from Google:
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
// [END region_geolocation]
</script>
<style>
#locationField, #controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}
</style>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField"><input class="field" id="street_number"
disabled="true"></input></td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true"></input></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"></input></td>
</tr>
</table>
</body>
</html>
On Google's example page, there is an error relating to a variable "Tk", but it the example still works. Whatever this V is, it is killing all my code. Any help?
Though you haven't mentioned which browser you are using and whether you use Firebug, here's what worked for me:
Initially, I thought Google updated their Maps JS which introduced this bug. However, after further digging around and testing in other browsers, I finally realised that this issue is caused by Firebug 2.0. Firebug got automatically updated to v2.0 on my computer, thus resulting in the error. Downgrading Firebug resolves the issue.
I have the following table:
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse">
<tr>
<td class="tr-l-t">
</td>
<td class="tr-t">
</td>
<td class="tr-r-t">
</td>
</tr>
<tr>
<td class="tr-l">
</td>
<td class="control-panel">
</td>
<td class="tr-r">
</td>
</tr>
<tr>
<td class="tr-l-b">
</td>
<td class="tr-b">
</td>
<td class="tr-r-b">
</td>
</tr>
...and CSS
.tr-l-t
{
background: url("../Images/tr_l_t.png") no-repeat;
width: 6px;
height: 6px;
}
.tr-l-b
{
background: url("../Images/tr_l_b.png") no-repeat;
width: 6px;
height: 6px;
}
.tr-r-t
{
background: url("../Images/tr_r_t.png") no-repeat;
width: 6px;
height: 6px;
}
.tr-r-b
{
background: url("../Images/tr_r_b.png") no-repeat;
width: 6px;
height: 6px;
}
.tr-t
{
background: transparent url("../Images/tr_t.png") repeat scroll 0 0;
height: 6px;
}
.tr-l
{
background: transparent url("../Images/tr_l.png") repeat scroll 0 0;
}
.tr-r
{
background: transparent url("../Images/tr_r.png") repeat scroll 0 0;
}
.tr-b
{
background: transparent url("../Images/tr_b.png") repeat scroll 0 0;
height: 6px;
}
.control-panel
{
background-color: #151515;
width: 300px;
height: 30px;
}
Both look good in IE7/8, FF, Chrome and Safari (Windows and Mac OS) browsers. However, in Safari for Ipod / Iphone / Ipad white stripes appear in between td tags. I've tried adding border:0 none, padding:0px, margin: 0px, but with no success.
Do you have any ideas on how to fix it?
margin-bottom: -2px; //on one of the TD elements
This worked for me, but in my case I was joining two TDs with a solid white color.
Not sure if this will be usable in every case.
Set the viewport using a meta tag in the template of the page. When the scale is at "1" the tables apear okay. When zooming in or out OR even setting the initial zoom anything other than 1, you get the gaps. That's what I'm working on at the moment.
reg,
MW