CSS-Stile, die nicht auf die in einem iframe angezeigte Seite angewendet werden

Ich habe eine externe CSS-Datei, die ich <link> in die Dateien, die ich ausgeführt habe. Einige der Stile werden angewendet, andere nicht. Ich bin der Syntax gefolgt, die ich an anderen Orten wie W3Schools und anderen Fragen hier gefunden habe. Aber ich kann einige von ihnen immer noch nicht zur Arbeit bringen. Die funktioniert, aber die collapse-border: collapse nicht. Und auch nicht die background-color Zeilen. Hier ist, was ich in der CSS-Datei haben:CSS-Stile, die nicht auf die in einem iframe angezeigte Seite angewendet werden

#OuterTable tr:hover{background-color: #f5f5f5;} 
#OuterTable {border-collapse: collapse;} 
#OuterTable tr:nth-child(odd) {background-color: #fff;} 
#OuterTable tr:nth-child(even){background-color: #e5e5e5;} 

#MaterialByState tr:hover{background-color: #f5f5f5} 
#MaterialByState tr:nth-child(odd) {background-color: #fff} 
#MaterialByState tr:nth-child(even){background-color: #e5e5e5} 
#MaterialByState {border-collapse: collapse}

Die #Name sind IDs für Tabellen, die ich in einem iFrame auf der Hauptseite bin Anzeige, wenn ich auf einen Link klicken. Die Tabellen werden angezeigt, sie sind einfach nicht so formatiert, wie ich sie haben möchte, und ich kann nicht herausfinden, was ich hier falsch mache. Ich habe mit und ohne die ; so bald oben versucht und keine Weise macht einen Unterschied. Ich kann die collapse-border: collapse zu arbeiten, wenn ich es in die Datei, die die Tabelle hat, aber die anderen Zeilen über die Hintergrundfarbe funktionieren nicht, wenn sie dort platziert. Und ich möchte, dass sie alle am gleichen Ort sind, damit ich sie alle am selben Ort aktualisieren kann, anstatt meinen Code für die Tische zu durchsuchen. Ich benutze PHP-Code, um Daten aus einer DB zu ziehen, so dass es nicht am schönsten oder am einfachsten ist, durchzugehen.

EDIT ich eine Hauptseite bin mit den anderen Seiten zu verknüpfen und sie in einem iFrame angezeigt werden soll. Auf den anderen Seiten, die ich die Anzeige ich die CSS in ihnen in den Dateien verknüpft sind, die die anderen Tabellen nennen:

<?php 
$servername = "Server"; 
$username = "User"; 
$password = "Password"; 
$dbname = "DBName"; 
echo '<link rel="StyleSheet" href="StyleSheet.css" type="text/css">';

Damit die HTML im iFrame sieht wie folgt aus:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>QDef</title> 
</head> 
<body> 
    <h2>This will pull down all the Queries from the QDef table</h2> 
<link rel="StyleSheet" href="StyleSheet.css" type="text/css">

und das CSS sieht so aus wie oben.

bearbeiten

Hier ist die QDef.php Datei, die ich im iFrame angezeigt versuchen:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>QDef</title> 
    <!--style type="text/css"> 
     table 
     { 
      border-collapse: collapse 
     } 
     #OuterTable tr:nth-child(odd) {background-color: #fff} 
     #OuterTable tr:nth-child(even){background-color: #e5e5e5} 
     #OuterTable tr:hover{background-color: #f5f5f5} 
    </style--> 
    <link rel="StyleSheet" href="StyleSheet.css" type="text/css"> 
</head> 
<body> 
    <h2>This will pull down all the Queries from the QDef table</h2> 
<?php 
$servername = "Server"; 
$username = "User"; 
$password = "Password"; 
$dbname = "DBName"; 
echo '<link rel="StyleSheet" href="StyleSheet.css" type="text/css">'; 
try 
{ 
    $conn = new PDO("sqlsrv:server=$servername;database=$dbname", $username,$password); 
    //set the PDO error mode to exception 
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    $conn->setAttribute(PDO::SQLSRV_ATTR_QUERY_TIMEOUT, 1); 
    echo "Connected Successfully<br>" /*. $conn*/; 
    /*If conncected see if we can pull any data!*/ 
} 
catch(Exception $e) 
{ 
    die(print_r($e->getMessage())); 
} 

$tsql = "select Id,QSrc,QName,isActive,RunReport,FilePath,QDef from pmdb.v_QDefs"; 
//echo $tsql . "<br>"; 
$getqueries = $conn->query($tsql); 

$queries = $getqueries->fetchALL(PDO::FETCH_ASSOC); 

$countqueries = count($queries); 

if(isset($countqueries)) 
{  
    if($countqueries > 0) 
    { 
     //echo "There are queries returned"; 

     BeginQueriesTable($countqueries); 
     foreach($queries as $query) 
     { 
      PopulateQueryTable($query); 
     } 
     EndQueriesTable(); 
    } 
    else 
    { 
     echo "<br>Values returned: $countqueries"; 
    } 
} 
else 
{ 
    echo "No count"; 
} 

function BeginQueriesTable($rowCount) 
{ 
    $headings = array("Id","QSrc","QName","isActive","RunReport","FilePath","QDef"); 
    echo "<table align='center' cellpadding='5' border='1' id=" . chr(34) . "OuterTable" . chr(34) . ">"; 
    echo "<thead valign=" . chr(34) . "top" . chr(34) . ">"; 
    echo "<tr>$rowCount Results</tr><tr bgcolor='silver'>"; 
    foreach ($headings as $heading) 
    { 
     echo "<th class=" . chr(34) . "cell" . chr(34) . ">$heading</th>"; 
    } 
    echo "</tr>"; 
} 

function PopulateQueryTable($values) 
{ 
    //$queryID = $values['ID']; 
    echo "<tbody valign=" . chr(34) . "top" . chr(34) . "><tr>"; 
    foreach($values as $key=>$value) 
    { 
     if (!is_null($value)) 
     { 
      echo "<td white-space: nowrap style overflow-x: scroll>$value</td>"; 
     } 
     else 
     { 
      echo "<td>N/A</td>"; 
     } 
    } 
    echo "</tr>"; 
} 

function EndQueriesTable() 
{ 
    echo "</tbody></table><br/>"; 
} 

?>   
</body> 
</html>

Die CSS-Datei oben bereits angezeigt wird. Hier

ist die Startseite:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>TestingSwitchingMainPage</title> 
    <style type="text/css"> 
     table 
     { 
      border-collapse: collapse 
     } 
    </style> 
    <link rel="StyleSheet" href="style.php" type="text/css"> 
</head> 
<body> 
    <UL> 
     <LI><A Href="MainPage.aspx" target="MainPage">Main</A> 
     <LI><A Href="QDef.php" target="MainPage">Material Tracking QDef</A> 
     <LI><A Href="MaterialTrackingAllStates.php" target="MainPage">Material Tracking All rows with State</A> 
     <LI><A Href="SearchStateProject.php" target="MainPage">Material Tracking Searh by State or Project Number</A> 
     <LI><A Href="TestPHP.php" target="MainPage">Material Tracking PHP Info</A> 
    </UL> 
    <iframe src="MainPage.aspx" Width=100% Height=750 name="MainPage" FrameBorder=0> 
     This will show up if the browser doesn't understand IFrame. 
    </iframe> 
</body> 
</html>

Ich weiß nicht, ob dies wird es noch klarer für Sie als ich php bin mit Daten aus einem SQL Server zu ziehen und dann angezeigt werden, dass in einem Tabelle.Was soll im iFrame zeigen. Ich kann die QDef.php-Datei selbst erstellen und das Styling wird immer noch nicht angewendet. Ich teste das in IE11, wenn das einen Unterschied macht. Ich möchte, dass es unabhängig davon verwendet werden kann, welchen Browser ich verwende.

EDIT 2

ich einige Änderungen an meinem CSS-Datei auf Empfehlungen von W3C Validation Checker basiert vorgenommen haben, die von @Mr Lister empfohlen wurde. Es sieht nun wie folgt aus:

#OuterTable tr:hover{background-color: #0094ff;} 
#OuterTable {border-collapse: collapse;} 
#OuterTable tr:nth-child(odd) {background-color: #fff !important;} iFrame 
#OuterTable tr:nth-child(even){background-color: #e5e5e5 !important;} iFrame 

#MaterialByState tr:hover{background-color: #0094ff} 
#MaterialByState tr:nth-child(odd) {background-color: #fff} 
#MaterialByState tr:nth-child(even){background-color: #e5e5e5} 
#MaterialByState {border-collapse: collapse} 

#OuterTable, td, th {border: 1px solid black} 
#OuterTable, thead {text-align: left} 
#OuterTable {text-align: left} 
#OuterTable, td, th {white-space: nowrap} 
#OuterTable, td, th {vertical-align: bottom} 
th {background-color: #808080; color: #fff} 
td, th {padding: 5px} 
tr:nth-child(odd) {background-color: #fff} 
tr:nth-child(even) {background-color: #e5e5e5} 

#OuterTable thead, table tbody { 
    border-collapse: collapse; 
    text-align: left; 
} 

#OuterTable tbody { 
    width: 100%; 
    overflow-x: scroll; 
} 

#OuterTable tbody:nth-child(odd) { 
    background: #f5f5f5; 
    border: solid 1px #ddd; 
} 

#OuterTable tbody:nth-child(even) { 
    background: #e5e5e5; 
    border: solid 1px #ddd; 
}

ich so ziemlich die ganze Tabelle genommen haben die Formatierung aus dem HTML und steckte es in der CSS-Datei. Bis jetzt funktioniert alles, außer dass die Reihen eine andere Farbe haben. Ich habe den Code, den ich gefunden habe, auf verschiedene Arten hinzugefügt, um es zum Laufen zu bringen.Ich habe #OuterTable tr:nth-child(odd) {background-color: #fff !important;} iFrame, und ich habe das tr:nth-child(odd) {background-color: #fff}, und ich habe diese #OuterTable tbody:nth-child(even) { background: #e5e5e5; border: solid 1px #ddd; }

Keine dieser verschiedenen Möglichkeiten, um arbeiten, wenn alles andere für diese Seite. Was kann ich noch tun, damit das funktioniert?

Quelle

2016-05-06 Mike

Mögliche Duplikate von [CSS überschreiben Körperstil für Inhalt in iframe?] (Http://stackoverflow.com/questions/6494721/css-override-body-style-for-content-in-iframe) – Jhecht

Ich habe gerade hinzugefügt eine Bearbeitung. Dies ist kein Duplikat für die andere Frage. Ich habe keine andere Formatierung oder einen anderen Stil als die CSS-Datei – Mike

Ich habe versucht, '! Wichtig' zu den Zeilen hinzuzufügen, die ich wirksam werden möchte, keine Änderung. – Mike

Ich konnte den Stil tr:nth-child(odd) {background-color: #fff} tr:nth-child(even) {background-color: #e5e5e5} nicht funktionieren, aber ich habe eine Arbeit gefunden. Ich gab der <tr></tr> eine Klasse. Ich wechselte die Klasse mit 2 verschiedenen Klassennamen (row und row1) und machte dann ein update für meine css, um .row1 {background-color: #fff} .row {background-color: #e5e5e5} zu haben. Dies gab mir die gebänderten Zeilen, die ich bekommen wollte und nicht mit der anderen Art, wie ich es versuchte. Ich hatte auch den PHP-Skript zu aktualisieren, um den Wechsel der Klasse zu tun, wie unten:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>QDef</title> 
    <link rel="StyleSheet" href="StyleSheet.css" type="text/css"> 
</head> 
<body> 
    <h2>This will pull down all the Queries from the QDef table</h2> 
<?php 
$servername = "Server"; 
$username = "User"; 
$password = "Password"; 
$dbname = "DBName"; 
echo '<link rel="StyleSheet" type="text/css" href="StyleSheet.css">'; 
try 
{ 
    $conn = new PDO("sqlsrv:server=$servername;database=$dbname", $username,$password); 
    //set the PDO error mode to exception 
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    $conn->setAttribute(PDO::SQLSRV_ATTR_QUERY_TIMEOUT, 1); 
    echo "Connected Successfully<br>" /*. $conn*/; 
    /*If conncected see if we can pull any data!*/ 
} 
catch(Exception $e) 
{ 
    die(print_r($e->getMessage())); 
} 

$tsql = "select Id,QSrc,QName,isActive,RunReport,FilePath,QDef from pmdb.v_QDefs"; 
//echo $tsql . "<br>"; 
$getqueries = $conn->query($tsql); 

$queries = $getqueries->fetchALL(PDO::FETCH_ASSOC); 

$countqueries = count($queries); 

if(isset($countqueries)) 
{  
    if($countqueries > 0) 
    { 
     //echo "There are queries returned"; 

     BeginQueriesTable($countqueries); 
      $CountValues = 1;  /**********Added************/ 
     foreach($queries as $query) 
     { 
      PopulateQueryTable($query,$CountValues);/******Updated******/ 
      $CountValues = !$CountValues;/***********Added**************/ 
     } 
     EndQueriesTable(); 
    } 
    else 
    { 
     echo "<br>Values returned: $countqueries"; 
    } 
} 
else 
{ 
    echo "No count"; 
} 

function BeginQueriesTable($rowCount) 
{ 
    $headings = array("Id","QSrc","QName","isActive","RunReport","FilePath","QDef"); 
    echo "<p>$rowCount Results</p>"; 
    echo "<table class=" . chr(34) . "tab" .chr(34) . "id=" . chr(34) . "OuterTable" . chr(34) . ">"; 
    echo "<thead>"; 
    echo "<tr>"; 
    foreach ($headings as $heading) 
    { 
     echo "<th class=" . chr(34) . "cell" . chr(34) . ">$heading</th>"; 
    } 
    echo "</tr>"; 
} 

function PopulateQueryTable($values,$Number)/******Updated*******/ 
{ 
    //$queryID = $values['ID']; 

    echo "<tbody><tr class=" . chr(34) . "row" . ($Number) . chr(34) . ">";/*******Updated**********/ 
    foreach($values as $key=>$value) 
    { 
     if (!is_null($value)) 
     { 
      echo "<td>$value</td>"; 
     } 
     else 
     { 
      echo "<td></td>"; 
     } 
    } 
    echo "</tr>"; 
} 

function EndQueriesTable() 
{ 
    echo "</tbody></table><br/>"; 
} 

?>   


</body> 
</html>

Sie können sehen, dass ich einen Zähler hinzugefügt, der jedes Mal aktualisiert werden würde, dass eine Zeile in die Tabelle verarbeitet wurde, so dass jeder Zeile hätte eine andere Klasse.

Vielen Dank an alle, die geholfen haben! Ich hoffe, dass diese Antwort anderen mit einem ähnlichen Problem helfen wird.

Quelle

2016-05-13 19:32:03 Mike

CSS-Stile, die nicht auf die in einem iframe angezeigte Seite angewendet werden

Antwort

Verwandte Themen