Question

我有一个外部CSS文件，我<link>到我正在运行的文件中。一些样式被应用但其他样式不适用。我已经遵循了我在其他地方找到的语法，如W3Schools和其他问题。但我仍然无法让他们中的一些人工作。 hover有效，但collapse-border: collapse没有。 background-color行也没有。这是我在css文件中得到的内容：

#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}

当我点击链接时，＃Name是我在主页面的iFrame中显示的表的ID。表格显示，它们没有按照我希望的方式格式化，我无法弄清楚我在这里做错了什么。我很快就尝试过使用;和不使用collapse-border: collapse，但两种情况都没有区别。如果我将它放在包含该表的文件中，我可以使<?php $servername = "Server"; $username = "User"; $password = "Password"; $dbname = "DBName"; echo '<link rel="StyleSheet" href="StyleSheet.css" type="text/css">';起作用，但是当放置在那里时，关于背景颜色的其他行不起作用。我希望他们都在同一个地方，这样我就可以在同一个地方更新所有内容，而不是通过我的代码搜索表格。我正在使用PHP代码从数据库中提取数据，因此它不是最漂亮或最简单的。

修改我正在使用主页链接到其他页面并在iFrame中显示它们。在我正在显示的其他页面上，我将css链接在调用其他表的文件中：

<!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">

因此iFrame中的HTML看起来像这样：

<!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>

并且CSS看起来像上面那样。

修改

这是我试图在iFrame中显示的QDef.php文件：

<!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>

CSS文件已在上面显示。

这是主页：

#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;
}

我不知道这是否会让你更清楚，因为我使用php从SQL Server中提取数据然后在表格中显示它。这应该在iFrame中显示。我可以单独提取QDef.php文件，但样式仍未应用。我在IE11中测试这个，如果这有任何区别。无论我使用什么浏览器，我希望它能够被使用。

编辑2

我根据@Mr Lister推荐的W3C验证检查程序的建议对我的CSS文件进行了一些更改。它现在看起来像这样：

#OuterTable tr:nth-child(odd) {background-color: #fff !important;} iFrame

我已经从HTML中获取了几乎所有表格格式并将其放入CSS文件中。到目前为止，一切都在工作，除了使行交替颜色。我已经添加了几种不同方式的代码，以尝试让它工作。我有tr:nth-child(odd) {background-color: #fff}而且我有#OuterTable tbody:nth-child(even) { background: #e5e5e5; border: solid 1px #ddd; }而且我有{{1}}

当此页面的所有内容都是这些时，这些方法都不起作用。我还能做些什么才能让它发挥作用？

Answer 1

我无法使样式tr:nth-child(odd) {background-color: #fff} tr:nth-child(even) {background-color: #e5e5e5}起作用，但我确实找到了解决方法。我给了<tr></tr>一堂课。我用2个不同的类名（row和row1）替换了这个类，然后对我的css进行了更新以获得.row1 {background-color: #fff} .row {background-color: #e5e5e5}这给了我想要得到的带状行，而不是用另一种方式我在努力。我还必须更新PHP脚本来执行类的交替，如下所示：

<!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>

你可以看到我添加了一个计数器，每当一条线被处理到表中时它会更新，这样每一行都会有不同的类。

感谢所有帮助过的人！我希望这个答案可以帮助其他人解决类似问题。

CSS样式不适用于iframe中显示的页面

1 个答案: