最受欢迎

如何有一个固定的宽度和高度的表可滚动

How to have the table scrollable with a fixed width and height?

本文关键字：高度 滚动 有一个 | 更新日期: 2023-09-26

我目前有表打印，它继续扩展宽度和高度，我希望能够有一个固定的宽度和高度滚动。除了居中之外。我怎么能做到呢?

<!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>

这是一个快速演示

实际应用>>这里<<

<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;
}
相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习