Javascript HTML，表格损坏_Javascript_Php_Jquery_Html_Css

Javascript HTML，表格损坏

javascript php jquery html css

Javascript HTML，表格损坏,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我正要提交我的项目，但我将所有表的输出合并到一起。。。我什么也没做，我只是把文件保存并复制到额外的位置作为备份。这是其中一页的问题：以下是CSS： /* my style sheet */ body { font-family:verdana; } body { width:100%; } a:hover { text-decoration:none; color:red; } h1 { color:blue; text-align:center; }

我正要提交我的项目，但我将所有表的输出合并到一起。。。我什么也没做，我只是把文件保存并复制到额外的位置作为备份。这是其中一页的问题：

以下是CSS：

/* my style sheet */
body {
    font-family:verdana;
}

body {
    width:100%;
}

a:hover {
    text-decoration:none; color:red;
}

h1 {
    color:blue; text-align:center;
}

h3 {
    color:Blue;
    text-align:center;
}

p {
    font-size;10pt;
    text-align:center;
}

header {
    width:75%; 
    padding:10px; 
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border:solid;
    background-color:#8F9779;
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
}

nav {
    width:75%; 
    padding:10px; 
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border:solid;
    background-color:#8F9779;
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
}

main {
    width:75%; 
    padding:10px; 
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border:solid;
    background-color:#8F9779;
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
}

footer {
    width:75%; 
    padding:10px;   
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border:solid;
    background-color:#8F9779;
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
}

table {
    margin-left:auto;
} 

table,th,td {
    border:solid 1px;   
}

table.table-style-one {
    table-layout: fixed;
    width: 400px;
    word-break: break-all;
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #3A3A3A;
    border-collapse: collapse;
}

table.table-style-one th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #3A3A3A;
    background-color: #B3B3B3;
}

table.table-style-one td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #3A3A3A;
    background-color: #ffffff;
}

body {
    background: no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 110px;
    font-weight: bold;
    /* color: #3B444B;
    3B444B background-color: #8F9779;*/
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    target-name:new;
    target-new:tab;
}

/*
a:hover, a:active {
    background-color: #F0FFFF;
}*/

#category ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#category a {
    float: left;
    padding: 0;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid black;
}

#category a:hover {
    background-color:  #F0FFFF;
}

#category li {
    display: inline;
}

.wrapper {
    text-align: center;
}

.wrapper ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    /* For IE, the outcast */
    zoom:1;
    *display: inline;
}

.wrapper li {
    float: left;
    padding: 2px 5px;
}

cart.php

<?php
if (!isset($_SESSION)) {
    session_start();
}  //start session

if (!isset($_SESSION['client_ID'])) {
    //echo "<script>alert('not logged in');</script>";
    header("Location: index.html"  );
}
?><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="Games, Gaming, PS4, PS3, XBOX, Video games">
<meta name="description" content="Games 4 You">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Games 4 You</title>
<link rel="stylesheet" type="text/css" href="Styles/ProductsStyle.css">
    <!-- javascript/jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<!--Add the following script at the bottom of the web page (before </body></html>)-->
<script type="text/javascript" async="async" defer="defer" data-cfasync="false" src="https://mylivechat.com/chatinline.aspx?hccid=42206151"></script>
<!-- Header tags above-->
<!-- Start with body tags -->
<script>// disable zoom to keep image fit and always in position
    document.firstElementChild.style.zoom = "reset";
</script>
<script type="text/javascript">
    // declare list of backgrounds
    var images = ['bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg'];

    // declare function that changes the background
    function setRandomBackground() {
        // choose random background
        var randomBackground = images[Math.floor(Math.random() * images.length)];

        // set background with jQuery
        $('body').css('background-image', 'url("Images/' + randomBackground + '")');
    }

    // declare function that sets the initial background, and starts the loop.
    function startLoop() {
        // Set initial background.
        setRandomBackground();

        // Tell browser to execute the setRandomBackground every 5 seconds.
        setInterval(setRandomBackground, 5 * 1000);
    }

    // One the page has finished loading, execute the startLoop function
    $(document).ready(startLoop);

</script>
<header id="header">
    <div class="container">
        <center><img src="Images/Title.png" alt="Title">
    </div>
        </center>
</header>
<center>
    <nav>
<?php
echo "<p> Welcome ".$_SESSION['client_name']."</p>";
//create connection
$con = new mysqli("localhost", "student", "student", "cib4003_h00233671_at");

if ($con->connect_errno) { //failed
    echo "Failed to connect to MySQL: (" . $con->connect_errno . ") " . $con->connect_error;
}?>
        <div class="wrapper">
            <ul id="category" >
                <li><a href="Products.php">Home</a></li>
                <li><a href="Products.php">Products</a></li>
                <li><a href="Productscart.php">View Cart</a></li>
                <li><a href="ViewOrderHistory.php">Orders</a></li>
                <li><a href="Settings.php">Settings</a></li>
                <li><a href="logout.php">Logoff</a></li>
            </ul>
        </nav>
    </div>
</center>
<main><!-- start with main tags which will include the php and tables -->
    <h3>Games Cart</h3><!-- text above the table using style to move it  -->
<?php
//new connection
$con = new mysqli("localhost", "student", "student", "cib4003_h00233671_at");
if ($con->connect_errno) { //failed
    echo "Failed to connect to MySQL: (" . $con->connect_errno . ") " . $con->connect_error;
}
//success 
// run sql 
$sql="SELECT * FROM products,clientscarts WHERE products.Product_Name=clientscarts.Product_Name AND clientscarts.client_ID=".$_SESSION['client_ID'];
$result = mysqli_query($con,$sql);
//output 
if(mysqli_num_rows($result)==0) { //no records found
    echo "<p>No Orders found! what are you waiting for!? go ahead and get a game & Enjoy</p>";
?>          
    <center><img src="Images/Happy Gaming.png" alt="Order"></center>
<?php
}
else { // records were found in DB
    // echo "<p>You have: ".mysqli_num_rows($result)." pizza(s)</p>";
    // echo "<p>You have: ".$totalPizza." pizza(s)</p>";
?>

    <table class="table-style-one">
        <tr>
            <th>Order ID</th>
            <th>Product Image</th>
            <th>Product Name</th>
            <th>Description</th>
            <th>Product Type</th>
            <th>Price ($)</th>
            <th>quantity</th>
            <th>     </th>
        </tr>
        <?php 
    while ($row =mysqli_fetch_array($result)){
        echo "<tr>";
        echo "<td>".$row['Order_ID']."</td>";
        echo "<td><img src='".$row['picture']."' width=199 height=188 />";
        echo "<td>".$row['Product_Name']."</td>";
        echo "<td>".$row['Description']."</td>";
        echo "<td>".$row['Product_Type']."</td>";
        if ($_SESSION['User_Type'] == "VIP" && $row['Discount_VIP'] < 1 ){
            echo "<td>".($row['Price'] * $row['Discount_VIP'] )."$<h4 style=font-size:3> After Discount</h1></td>";
        }
        else if ($_SESSION['User_Type'] == "Silver" && $row['Discount_Silver'] < 1 ) {
            echo "<td>".($row['Price'] * $row['Discount_Silver'] )."$<h4 style=font-size:3> After Discount</h1></td>";
        }
        else {
            echo "<td>".$row['Price']."$ </td>";
        }

        echo "<td><center><a href='increasequantity.php?PID=".$row['Order_ID']."'/><h4>Increase &#10133</h4></a>".$row['quantity']."<a href='decreasequantity.php?PID=".$row['Order_ID']."'/><h4>Decrease &#x2796</h4></a></center></td>";
        echo "<td> <a href='removeorder.php?PID=".$row['Order_ID']."'/>Remove from cart </a></td>";
        echo "</tr>";

        if ($_SESSION['User_Type'] == "VIP" && $row['Discount_VIP'] < 1 ) {
            $total=$total+($row['Price'] * $row['Discount_VIP']);
        }
        else if ($_SESSION['User_Type'] == "Silver" && $row['Discount_Silver'] < 1 ) {
            $total=$total+($row['Price'] * $row['Discount_Silver']);
        }
        else {
            $total=$total+($row['Price']*$row['quantity']);
        }

        $totalGames=$totalGames+($row['quantity']);
    }

    echo "<tr><td>Total Games:</td><td>".$totalGames." Game's</td>";
    echo "<td> <a href='removeallorder.php'/>Remove All Items</a></td>";
    echo "<td ><center>Total bill: ".$total."$ </center></td>";
    echo "<td colspan='4'><a href='Billpage.php?total='".$total."'>   <img width=200 height=96 src=Images/buy-now.png></a></td>";
    echo "</table> ";
}
?></h2>
    </main>
</body>
<!-- main tag closed followed by closing body tag -->
<footer><!-- footer start here with in-line style plus using underline for website link HCT Portal -->
    <div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL, multilanguagePage: true}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</footer><!-- Close footer -->
</html><!-- close HTML tag -->










游戏车
订单号
产品形象
品名
描述
产品类型
价格（元）
量
如果要使表格或表格单元格的行为与表格或表格单元格的行为不同，那么它可能在CSS中。一些评论，1）您的页面不需要多个连接（$con=new mysqli（“localhost”、“student”、“student”、“cib4003\u h00233671\u at”）；
）。只要一个就够了。2） 在标题之后（“位置：index.html”）您需要退出3）尽量与您的if/else
保持一致。这：如果（！isset（$_SESSION））{SESSION_start（）；}
不一致。3a）你的缩进需要整体上更加一致。也许你的宽度是小的尝试overflow:auto
，如果一半的卡片在底部有一个滚动条，那么你就会知道这是宽度问题，我测试了所有的问题，但有效的是编辑css，在表i中有如下表布局：修复；宽度：400px；单词break：打破一切；这是导致此问题的原因，我以前添加了该代码，但从未导致任何问题。@Daisy先生，这可能是因为上次更改css文件时，css文件被浏览器缓存了。这使得更改不会立即显示，除非您清除浏览器的缓存或按住shift键并刷新页面。