DS928
asked on
CSS Not Applying
I have a table with CSS, but it doesn't seem to be applying. I am trying to set the column widths, set the headers on a left align and have a border around the table. None of this seems to be happening.
<style type=”text/css”>
.viewpost {
border: 1.5px solid #367588;
background-color: #333;
margin-bottom:25px;
}
.viewpost1 {
border: 1.5px solid #367588;
background-color: #333;
line-height:100px;
vertical-align:top;
margin-left:10px;
}
table{
align:center;
border: 1px solid black;
table-layout: fixed;
width: 930px;
}
th, td {
border: 1px solid black;
overflow: hidden;
width: 150px;
}
</style>
if ($result->num_rows > 0) {
// output data of each row
echo '<table>';
echo "<thead>";//open teùable headers
echo "<tr><th>Record ID</th>
<th>Customer</th>
<th>Site</th>
<th>User Name</th>
<th>Password</th>
<th>Date Added</th></tr>";
echo "</thead>";//close headers row
echo "<tbody>";//open table body
while($row = $result->fetch_assoc()) {
echo "<tr class='viewpost'>";
if(!empty($row['recordId'])) {
echo '<td>' . $row['recordId'] . '</td>';
}
else
{
echo '<td>NA</td>';
}
if(!empty($row['recordCust'])) {
echo '<td>' . $row['recordCust'] . '</td>';
}
else
{
echo '<td>NA</td>';
}
if(!empty($row['recordSite'])) {
echo '<td>' . $row['recordSite'] . '</td>';
}
else
{
echo '<td>NA</td>';
}
if(!empty($row['recordUser'])) {
echo '<td>' . $row['recordUser'] . '</td>';
}
else
{
echo '<td>NA</td>';
}
if(!empty($row['recordPass'])) {
echo '<td>' . $row['recordPass'] . '</td>';
}
else
{
echo '<td>NA</td>';
}
if(!empty($row['recordDateAdded'])) {
echo '<td>' . $row['recordDateAdded'] . '</td>';
}
else
{
echo '<td>NA</td>';
}
echo "</tr>"; //closing row
}
echo '</tbody>';
echo '</table>';
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
This applies the styling correctly according to my tests.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.viewpost {
color:yellow;
border: 1.5px solid #367588;
background-color: #333;
margin-bottom:25px;
}
.viewpost1 {
border: 1.5px solid #367588;
background-color: #333;
line-height:100px;
vertical-align:top;
margin-left:10px;
}
table{
align:center;
border: 1px solid black;
table-layout: fixed;
width: 930px;
}
th, td {
border: 1px solid black;
overflow: hidden;
width: 150px;
}
</style>
<title>E-E Question: Q_28603535.html</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Record ID</th>
<th>Customer</th>
</tr>
</thead>
<tbody>
<tr class='viewpost'>
<td> {{recordid}} </td>
<td> {{Customer}} </td>
</tr>
</tbody>
</table>
</body>
</html>
ASKER
Thank you to the both of you. Removing the double quotes unlocked the CSS and Marco provided the formating. ONce again thank you!
1. Your browser is continuing to use the cache version of this html(php) page.
- Try force refresh (Ctrl + F5) a few times.
2. There might be a path error within the html file.
- Open the web page in browser and view source. Click on the css file and check if the css is able to open or not. If not, you will have to fix the path.
3. If you are using this in a cloud like app engine or heroku, you need to ensure that the static files are set properly.