I have an external CSS file that I <link> into the files that I'm running. Some of the styles are applied but others are not. I have followed the syntax that I've found in other places like W3Schools and other questions here. But I still cannot get some of them to work. The hover works, but the collapse-border: collapse does not. And neither do the background-color lines. Here is what I've got in the css file:
#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}
The #Name are ID's for tables that I am displaying in an iFrame on the main page when i click on a link. The tables display, they just are not formatted the way that I want them to be and I cannot figure out what I'm doing wrong here. I've tried with and without the ; as soon above and neither way makes a difference. I can get the collapse-border: collapse to work if I put it in the file that has the table, but the other lines about the background color don't work when placed there. And I want them to all be in the same place so that I can update them all in the same place instead of hunting through my code for the tables. I'm using PHP code to pull data from a DB so it's not the prettiest or easiest to go through.
EDIT I am using a main page to link to the other pages and display them in an iFrame. On the other pages that I'm displaying I have the css linked in them in the files that call the other tables:
<?php
$servername = "Server";
$username = "User";
$password = "Password";
$dbname = "DBName";
echo '<link rel="StyleSheet" href="StyleSheet.css" type="text/css">';
So that the HTML in the iFrame looks like this:
<!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">
and the CSS looks like it does above.
Edit
Here is the QDef.php file that I am trying to display in the iFrame:
<!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>
The CSS file is already showing above.
Here is the Main Page:
<!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>
I don't know if this will make it any clearer for you as I'm using php to pull data from a SQL Server and then display that in a table.Which is supposed to show in the iFrame. I can pull the QDef.php file up by itself and the styling is still not being applied. I'm testing this in IE11 if that makes any difference. I want it to be able to be used regardless what browser I'm using.
EDIT 2
I have made some changes to my CSS file based on recommendations from W3C Validation Checker that was recommended from @Mr Lister. It now look like this:
#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;
}
I have taken pretty much all the table formatting out of the HTML and put it in the CSS file. So far everything is working except making the rows alternate color. I have added the code that I've found in several different ways to try and get it to work. I've got #OuterTable tr:nth-child(odd) {background-color: #fff !important;} iFrame and I've got this tr:nth-child(odd) {background-color: #fff} and I've got this #OuterTable tbody:nth-child(even) {
background: #e5e5e5;
border: solid 1px #ddd;
}
None of these various ways are working when everything else for this page is. What else can I do to get this working??
