trying to display sql database into php webpage, the CSS didnt work

Question

I am trying to display the sql database into a table in php web page. at the beginning everything went okay. but as I insert the CSS, the table didn't work out and I can't figured out why. I tried to reposition the code, it didn't work too :(

<?php

session_start();
if(!empty($_SESSION['pswd']))
{
        header("location:form.html");
}

?>

<html>
<head>
<link href="table.css" type="text/css"/>
</head>

<body>
<div class="tablee" style="width:1100px;height:100px;">

<?php

    $connection = mysql_connect("localhost", "root", "" );

if (!$connection)
{
    die('Could not connect:' .mysql_error());
}

mysql_select_db("permohonan_data", $connection);

    $result = mysql_query("SELECT * FROM pemohon");

//this is table
echo"<table>
<tr>
<th>NAME</th>
<th>POSITION</th>
<th>UNIT</th>
<th>DEPARTMENT</th>
<th>TELEFON</th>
<th>FAKS</th>
<th>E-mail</th>
<th>DATA</th>
<th>REASON</th>
</tr>";

//table with data
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['position'] . "</td>";
echo "<td>" . $row['unit'] . "</td>";
echo "<td>" . $row['department'] . "</td>";
echo "<td>" . $row['telefon'] . "</td>";
echo "<td>" . $row['faks'] . "</td>";
echo "<td>" . $row['email'] . "</td>";
echo "<td>" . $row['data'] . "</td>";
echo "<td>" . $row['reason'] . "</td>";
}
echo "</table>";

print "<p>Please feel free to drop by again!<br>";

mysql_close($connection);
?>

</div>
</body>
</html>

here's the CSS

.tablee {
    margin:0px;padding:0px;
    width:100%;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #000000;
    -moz-border-radius-bottomleft:9px;
    -webkit-border-bottom-left-radius:9px;
    border-bottom-left-radius:9px;
    -moz-border-radius-bottomright:9px;
    -webkit-border-bottom-right-radius:9px;
    border-bottom-right-radius:9px;
    -moz-border-radius-topright:9px;
    -webkit-border-top-right-radius:9px;
    border-top-right-radius:9px;
    -moz-border-radius-topleft:9px;
    -webkit-border-top-left-radius:9px;
    border-top-left-radius:9px;
}

.tablee table {
    width:100%;
    height:100%;
    margin:0px;padding:0px;
}

.tablee tr:last-child td:last-child {
    -moz-border-radius-bottomright:9px;
    -webkit-border-bottom-right-radius:9px;
    border-bottom-right-radius:9px;
}

.tablee table tr:first-child td:first-child {
    -moz-border-radius-topleft:9px;
    -webkit-border-top-left-radius:9px;
    border-top-left-radius:9px;
}

.tablee table tr:first-child td:last-child {
    -moz-border-radius-topright:9px;
    -webkit-border-top-right-radius:9px;
    border-top-right-radius:9px;
}

.tablee tr:last-child td:first-child {
    -moz-border-radius-bottomleft:9px;
    -webkit-border-bottom-left-radius:9px;
    border-bottom-left-radius:9px;
}

.tablee tr:hover td {
    background-color:#82c0ff;
    background:-o-linear-gradient(bottom, #82c0ff 5%, #56aaff 100%);    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #82c0ff), color-stop(1, #56aaff) );
    background:-moz-linear-gradient( center top, #82c0ff 5%, #56aaff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#82c0ff", endColorstr="#56aaff");  background: -o-linear-gradient(top,#82c0ff,56aaff);
}

.tablee tr:first-child td {
    background:-o-linear-gradient(bottom, #0069d3 5%, #007fff 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0069d3), color-stop(1, #007fff) );
    background:-moz-linear-gradient( center top, #0069d3 5%, #007fff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0069d3", endColorstr="#007fff");  background: -o-linear-gradient(top,#0069d3,007fff);
    background-color:#0069d3;
    border:0px solid #000000;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:18px;
    font-family:Comic Sans MS;
    font-weight:bold;
    color:#ffffff;
}

.tablee tr:first-child:hover td {
    background:-o-linear-gradient(bottom, #0069d3 5%, #007fff 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0069d3), color-stop(1, #007fff) );
    background:-moz-linear-gradient( center top, #0069d3 5%, #007fff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0069d3", endColorstr="#007fff");  background: -o-linear-gradient(top,#0069d3,007fff);
    background-color:#0069d3;
}

.tablee tr:first-child td:first-child {
    border-width:0px 0px 1px 0px;
}

.tablee tr:first-child td:last-child {
    border-width:0px 0px 1px 1px;
}

.tablee td {
    background:-o-linear-gradient(bottom, #56aaff 5%, #82c0ff 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #56aaff), color-stop(1, #82c0ff) ); 
    background:-moz-linear-gradient( center top, #56aaff 5%, #82c0ff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#56aaff", endColorstr="#82c0ff");  background: -o-linear-gradient(top,#56aaff,82c0ff);
    background-color:#56aaff;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    font-size:12px;
    font-family:Comic Sans MS;
    font-weight:bold;
    color:#000000;
}

.tablee tr:last-child td {
    border-width:0px 1px 0px 0px;
}

.tablee tr td:last-child {
    border-width:0px 0px 1px 0px;
}

.tablee tr:last-child td:last-child {
    border-width:0px 0px 0px 0px;
}

thank you for helping !

what part of the css isnt working? you have inline styles '<div class="tablee" style="width:1100px;height:100px;">' that will overwrite anything in your CSS file ie .tablee width=100% — user934902
– user934902, Commented Dec 19, 2013 at 14:29
@user934902 even when I don't have inline styles, the css part isn't working.. — Syaa
– Syaa, Commented Dec 20, 2013 at 1:12

James Binford · Accepted Answer · 2013-12-19 03:41:14Z

1

You're missing an </tr> after your While loop, which may be breaking your table:

//table with data
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['position'] . "</td>";
echo "<td>" . $row['unit'] . "</td>";
echo "<td>" . $row['department'] . "</td>";
echo "<td>" . $row['telefon'] . "</td>";
echo "<td>" . $row['faks'] . "</td>";
echo "<td>" . $row['email'] . "</td>";
echo "<td>" . $row['data'] . "</td>";
echo "<td>" . $row['reason'] . "</td>";
echo "</tr>";  // Add this in
}

answered Dec 19, 2013 at 3:41

James Binford

2,9031 gold badge16 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Binford Over a year ago

Show us the CSS. All you show above is the include of the file.

Syaa Over a year ago

sorry, I have added the CSS

Collectives™ on Stack Overflow

trying to display sql database into php webpage, the CSS didnt work

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related