如何使用固定的宽度和高度滚动表格？

时间：2014-03-29 00:20:11

标签： php html css3 tabular

我目前已经打印了表格，并且它继续扩展宽度和高度，我希望能够以固定的宽度和高度滚动。除了居中之外。我怎样才能做到这一点。 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>
      Jomana Sherif Presentation
    </title>
    <link rel="stylesheet" type="text/css" href="first.css">
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"/>
    <script type='text/javascript' src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
    <script language="javascript" type="text/javascript" src="first.js"></script>


    <form action="first.php" method="GET">
      <input type="text" name="query" />
      <input type="submit" value="Search" />
    </form>
</head>
<body bgcolor="#E6E6FA">

<?php
print date('D, d M Y H:i:s');
print "\n";


//REQUIRE 'index.html' ;
//Connect to database server

mysql_connect("localhost", "root", "") or die(mysql_error());
//Select database
mysql_select_db("Disney") or die(mysql_error());
// 
// // The SQL statement is built
// 
$strSQL = "INSERT INTO DisneyCharacters(Name, Movie, Year, ShoeSize,FavoriteColor, FavoriteFood, PhoneNumber, CharacterType, FavoriteDrink, Address, FavoriteTvShow, School, Age, HouseSqFoot, RelationShip, Rating, CarModel, CarYear, Boyfriend, NumberFriends, CriminalHistory, HappyEnding, FavoriteLocation, AppleDevice, WorkLocation, Weight, RepublicanDemocratic, DressColor, Shampoo, NumberKids) 

Values 
('Jomana', 'Cinderella', '1998', '0', 'Blue', 'Sushi', '767676565', 'Bubbly', 'ice tea', 'Hills', '70s Show', 'Hyde', '12', '1231', 'Single', '0', 'BMW', '1990', 'NO', '12', 'no', 'Yes', 'Beach', 'iPhone', 'Apple', '120', 'Republican', 'Blue', 'Green', '0'),
('Sherif', 'Cinderella', '1998', '0', 'Blue', 'Sushi', '767676565', 'Bubbly', 'ice tea', 'Hills', '70s Show', 'Hyde', '12', '1231', 'Single', '0', 'BMW', '1990', 'NO', '12', 'no', 'Yes', 'Beach', 'iPhone', 'Apple', '120', 'Republican', 'Blue', 'Green', '0'),
('Jomana', 'Cinderella', '1998', '0', 'Blue', 'Sushi', '767676565', 'Bubbly', 'ice tea', 'Hills', '70s Show', 'Hyde', '12', '1231', 'Single', '0', 'BMW', '1990', 'NO', '12', 'no', 'Yes', 'Beach', 'iPhone', 'Apple', '120', 'Republican', 'Blue', 'Green', '0'),
('Jomana', 'Cinderella', '1998', '0', 'Blue', 'Sushi', '767676565', 'Bubbly', 'ice tea', 'Hills', '70s Show', 'Hyde', '12', '1231', 'Single', '0', 'BMW', '1990', 'NO', '12', 'no', 'Yes', 'Beach', 'iPhone', 'Apple', '120', 'Republican', 'Blue', 'Green', '0')";

// $strSQL = "INSERT INTO DisneyCharacters(Name, Movie, Year, ShoeSize, FavoriteColor, FavoriteFood, PhoneNumber, CharacterType, FavoriteDrink, Address, FavortieTvShow, School, Age, HouseSqFoot, RelationShip, Rating, CarModel, CarYear, Boyfriend, NumberFriends, CriminalHistory, HappyEnding, FavoriteLocation, AppleDevice, WorkLocation, Weight, RepublicanDemocratic, DressColor, Shampoo, NumberKids) 
// Values 
// ('Jomana', 'Cinderella', '1998', '0', 'Blue', 'Meat', '3457658798', 'Happy', 'soda', 'Hills Ave', '70Show', 'Hyde', '13', '123', 'Single, '5', 'BMW', '1990', 'No', '6', 'No', 'Yes', 'Starbucks', 'iPhone', 'Apple', '190', 'Republican', 'blue', 'dove', '0')";

// The SQL statement is executed

mysql_query($strSQL) or die(mysql_error());

// Close the database connection

mysql_close();
?>

<!-- 
<h1>The database is updated!</h1>
 -->
<!-- 

<h2> printing HTML</h2>

<?php
// Connect to database server
mysql_connect("localhost", "root", "") or die (mysql_error ());

// Select database
mysql_select_db("Disney") or die(mysql_error());

// SQL query
$strSQL = "SELECT * FROM DisneyCharacters";

// Execute the query (the recordset $rs contains the result)
$rs = mysql_query($strSQL);

// Loop the recordset $rs
// Each row will be made into an array ($row) using mysql_fetch_array
while($row = mysql_fetch_array($rs)) {

// Write the value of the column FirstName (which is now in the array $row)
echo $row['Name'] . "
<br />
";

}

// Close the database connection
mysql_close();
?>
 -->

<h2> Displaying results in HTML TABLE</h2>
<!-- 

<?php
$con=mysqli_connect("localhost","root","","Disney");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$result = mysqli_query($con,"SELECT * FROM DisneyCharacters");

echo "<table border='1'>
<tr>
<th>Name</th>
<th>Movie</th>
<th>year</th>

</tr>";

while($row = mysqli_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['Name'] . "</td>";
  echo "<td>" . $row['Movie'] . "</td>";
  echo "<td>" . $row['Year'] . "</td>";

  echo "</tr>";
  }
echo "</table>";

mysqli_close($con);
?>
 -->


<?php


if(!$link = mysql_connect("localhost", "root", "")) {
     echo "Cannot connect to db server";
}
elseif(!mysql_select_db("Disney")) {
     echo "Cannot select database";
}
else {
     if(!$rs = mysql_query("SELECT * FROM DisneyCharacters")) {
          echo "Cannot parse query";
     }
     elseif(mysql_num_rows($rs) == 0) {
          echo "No records found";
     }
     else {
//      FavoriteColor, FavoriteFood, PhoneNumber, CharacterType, FavoriteDrink, Address, FavortieTvShow, School, Age, HouseSqFoot, RelationShip, Rating, CarModel, CarYear, Boyfriend,
// NumberFriends, CriminalHistory, HappyEnding, FavoriteLocation, AppleDevice, WorkLocation, Weight, RepublicanDemocratic, DressColor, Shampoo, NumberKids) 

          echo "<table  width=\"400\" height=\"1\" id=\"sortedtable\" class=\"bordered\" cellspacing=\"0\">\n";
          echo "<thead>\n<tr>";
          echo "<th>Name  </th>";
          echo "<th>Movie  </th>";
          echo "<th>Year  </th>";
          echo "<th>Shoe Size </th>";
          echo "<th>Favorite Color </th>";
          echo "<th>Favorite Food </th>";
          echo "<th>Phone Number </th>";
          echo "<th>Character Type </th>";
          echo "<th>Favorite Drink </th>";
          echo "<th>Address </th>";
          echo "<th>Favorite TvShow </th>";
          echo "<th>School </th>";
          echo "<th>Age </th>";
          echo "<th>HouseSqFoot </th>";
          echo "<th>Relationship </th>";
          echo "<th>Rating </th>";
          echo "<th>Car Model </th>";
          echo "<th>Car Year </th>";
          echo "<th>Boyfriend </th>";
          echo "<th>Number Friends </th>";
          echo "<th>Criminal History </th>";
          echo "<th>Happy Ending </th>";
          echo "<th>Favorite Location </th>";
          echo "<th>Apple Device </th>";
          echo "<th>Work Location </th>";
          echo "<th>Weight</th>";
          echo "<th>Republican Democratic </th>";
          echo "<th>Dress Color </th>";
          echo "<th>Shampoo </th>";
          echo "<th>Number Kids </th>";
echo "</tr>\n</thead>\n";


          echo " <tbody>";
          while($row = mysql_fetch_array($rs)) {


               echo "<tr>
                    <td>$row[Name]&nbsp</td>
                    <td>$row[Movie]&nbsp&nbsp</td>
                    <td>$row[Year]&nbsp</td>
                    <td>$row[ShoeSize]&nbsp</td>
                    <td>$row[FavoriteColor]&nbsp</td>
                    <td>$row[FavoriteFood]&nbsp</td>
                    <td>$row[PhoneNumber]&nbsp</td>
                    <td>$row[CharacterType]&nbsp</td>
                    <td>$row[FavoriteDrink]&nbsp</td>
                    <td>$row[Address]&nbsp</td>
                    <td>$row[FavoriteTvShow]&nbsp</td>
                    <td>$row[School]&nbsp</td>
                    <td>$row[Age]&nbsp</td>
                    <td>$row[HouseSqFoot]&nbsp</td>
                    <td>$row[RelationShip]&nbsp</td>
                    <td>$row[Rating]&nbsp</td>
                    <td>$row[CarModel]&nbsp</td>
                    <td>$row[CarYear]&nbsp</td>
                    <td>$row[Boyfriend]&nbsp</td>
                    <td>$row[NumberFriends]&nbsp</td>
                    <td>$row[CriminalHistory]&nbsp</td>
                    <td>$row[HappyEnding]&nbsp</td>
                    <td>$row[FavoriteLocation]&nbsp</td>
                    <td>$row[AppleDevice]&nbsp</td>
                    <td>$row[WorkLocation]&nbsp</td>
                    <td>$row[Weight]&nbsp</td>
                    <td>$row[RepublicanDemocratic]&nbsp</td>
                    <td>$row[DressColor]&nbsp</td>
                    <td>$row[Shampoo]&nbsp</td>
                    <td>$row[NumberKids]&nbsp</td>
                </tr>\n";



          }
           echo " </tbody>";
          echo "</table><br />\n";
     }

}
?>
<!-- 
Searching & Result
 -->
<?php
    $query = $_GET['query']; 
    // gets value sent over search form

    $min_length = 3;
    // you can set minimum length of the query if you want

    if(strlen($query) >= $min_length){ // if query length is more or equal minimum length then

        $query = htmlspecialchars($query); 
        // changes characters used in html to their equivalents, for example: < to &gt;

        $query = mysql_real_escape_string($query);
        // makes sure nobody uses SQL injection

        $raw_results = mysql_query("SELECT * FROM DisneyCharacters
            WHERE (`Name` LIKE '%".$query."%') OR (`Year` LIKE '%".$query."%') OR(`Movie` LIKE '%".$query."%')") or die(mysql_error());

        if(mysql_num_rows($raw_results) > 0){ // if one or more rows are returned do following

            while($results = mysql_fetch_array($raw_results)){
            // $results = mysql_fetch_array($raw_results) puts data from database into array, while it's valid it does the loop

                echo "<p> The result of your search is: </p>".$results['Name']."<spann> </span>".$results['Year']."<spann> </span>".$results['Movie']."</p>";
            }

        }
        else{ // if there is no matching rows do following
            echo "No results";
        }

    }
    else{ // if query length is less than minimum
        echo "Minimum length is ".$min_length;
    }
?>

    </body>
</html>

1 个答案:

答案 0 :(得分：0)

这是您可以做的快速演示

SEE IT IN ACTION >> HERE <<

<强> HTML 

<div class="wrapper">
<table>
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Dolorem, deleniti, reiciendis?</td>
        <td>Voluptatibus, dolorum, harum.</td>
        <td>Aliquam, quos ex!</td>
        <td>Fugiat, libero, impedit!</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Maiores, veritatis, omnis.</td>
        <td>Quidem, nemo, nulla.</td>
        <td>Autem, odio, accusantium.</td>
        <td>Repellat, doloribus, dolor.</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Ea, nulla, sequi.</td>
        <td>Numquam, inventore, totam!</td>
        <td>Odio, dicta, voluptates?</td>
        <td>Perspiciatis, quasi, maxime.</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Omnis, illum, iste!</td>
        <td>Officiis, unde, vitae.</td>
        <td>Iste, libero, eligendi.</td>
        <td>Debitis, ut ullam.</td>
    </tr>
</table>
</div>

<强> CSS 

.wrapper{
    max-height: 300px;
    max-width: 300px;
    overflow: auto;
}
tr, td{
    border: 1px solid #000;
}
table{
    width: 600px;
    height: 900px;    
    border: 1px solid #000;
}
相关问题
最新问题