Question

我想阻止搜索到的数据表被拉伸。如果搜索的数据很多，则表格大小合适，但是当搜索的数据很少时，它会显示拉伸表格高度的数据，这看起来很尴尬。我需要知道如何防止桌子伸展。:(

以下是代码。

    <style type="text/css">
table{
background-color:#EBEBEB; /*background line table*/
}
th{
    width:150px;
    text-align:left;
    }

    </style>
    </head>

    <style type="text/css">
    table {
      table-layout:fixed;
         width:100%;
         border:0px solid ; 
         height:1px;


             word-wrap:break-word;
            overflow:scroll;
            }
            p   {font-size:9px}

         tbody { height:20em;  overflow:scroll; width:fixed;}
     td { height:auto;}

    </style>

    <body>


    <form method="post" action="searchschoolsthis.php">
    <input type="hidden" name="submitted" value="true" />

    <label><span class="style2">Pilih Kategori:</span>
    <span class="style1">
    <select name="category">
      <option value="negeri">NEGERI</option>
      <option value="daerah">DAERAH</option>
      <option value="kod_sekolah">KOD SEKOLAH</option>
    </select>
     </span></label>

     <span class="style1">
     <span class="style2">Taip Kriteria
     <label>:</label>
     </span>
     <label>
     <input type="text" name="criteria" onKeyUp="this.value = this.value.toUpperCase();"/>
     </label>
     <input type="submit" value="Cari" />
                </form>   


                <form action="php_excel_export.php?criteria=<?php echo($_POST['criteria']); ?>" method="post" name="criteria" target="_blank" id="cetak">
                 <input type="submit" name="cetak" id="cetak" value="Cetak" />
                </form>

     </span>


       <table width='100%' color='black' id='header'>

       <thead>
        <tr>
          <td width="40%" scope="col"><div align="center"><span class="style2">Kod Sekolah</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2">Nama Sekolah</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2">PTJ</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2">Server</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2">PC</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2">NB</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2">Mono Laser</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2">Color Laser</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2">Dot Matrix</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2">LCD</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2">Set LAN</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2">Jumlah Kos</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2">Dibayar</span></div></td> 
          <td width="50%" scope="col"><div align="center"><span class="style2">Tanggungan</span></div></td> 
        </tr>
      </thead>
        </table>


    <?php

    if(isset($_POST['submitted'])){

    include('connect.php');
    $category=$_POST['category'];
    $criteria=$_POST['criteria'];
    $query="SELECT * FROM schools WHERE $category = '$criteria'";
    $result=mysqli_query($dbcon,$query) or die('error getting data');


    echo "<table width='120%' border='2' color='black' id='header'>";


    while ($row = mysqli_fetch_array($result,MYSQL_ASSOC)){


    echo"<tr><td>";

    echo $row['kod_sekolah'];

    echo"</td><td>";    

    echo $row['nama_sekolah'];
    echo"</td><td>";

    echo $row['ptj'];
    echo"</td><td>";

    echo $row['server'];
    echo"</td><td>";

    echo $row['pc'];
    echo"</td><td>";

    echo $row['nb'];
    echo"</td><td>";

    echo $row['mono_laser'];
    echo"</td><td>";

    echo $row['color_laser'];
    echo"</td><td>";

    echo $row['dot_matrix'];
    echo"</td><td>";

    echo $row['lcd'];
    echo"</td><td>";

    echo $row['set_lan'];
    echo"</td><td>";

    echo $row['jumlah_kos'];
    echo"</td><td>";

    echo $row['dibayar'];
    echo"</td><td>";

    echo $row['tanggungan'];
    //echo"</td><td  style='text-align:right'>";

    echo"</td></tr>";

    }

    echo "</table>";

    }


    ?>

Answer 1

您可以尝试在表格元素上使用CSS指令display: inline-table;。

table {
  display: inline-table;
  table-layout:fixed;
  border: none; 
  word-wrap:break-word;
  overflow:scroll;
}

也许您必须删除table-layout:fixed;以及有关单元格宽度的说明

Answer 2

清理你的代码（几乎完全重写它）。如果是数据，下面的代码似乎可以使用短列表和长列表来工作（猜测数据类型/格式）。

<html>
    <head>
        <style type="text/css">
            table {
                background-color:#EBEBEB;
                table-layout:fixed;
            }
            th {
                text-align:center;
                min-width:90px;
            }
            td {
                text-align:center;
            }
        </style>
    </head>
    <body>
        <form method="post" action="searchschoolsthis.php">
            <input type="hidden" name="submitted" value="true" />
            Pilih Kategori:
            <select name="category">
                <option value="negeri">NEGERI</option>
                <option value="daerah">DAERAH</option>
                <option value="kod_sekolah">KOD SEKOLAH</option>
            </select>
            Taip Kriteria:
            <input type="text" name="criteria" onKeyUp="this.value = this.value.toUpperCase();"/>
            <input type="submit" value="Cari" />
        </form>   
        <form action="php_excel_export.php?criteria=<?php if(isset($_POST['criteria'])){echo($_POST['criteria']);} ?>" method="post" name="criteria" target="_blank" id="cetak">
            <input type="submit" name="cetak" id="cetak" value="Cetak" />
        </form>
        <table id='header'>
            <thead>
                <tr>
                    <th>Kod Sekolah</th> 
                    <th>Nama Sekolah</th> 
                    <th>PTJ</th> 
                    <th>Server</th> 
                    <th>PC</th> 
                    <th>NB</th> 
                    <th>Mono Laser</th> 
                    <th>Color Laser</th> 
                    <th>Dot Matrix</th> 
                    <th>LCD</th> 
                    <th>Set LAN</th> 
                    <th>Jumlah Kos</th> 
                    <th>Dibayar</th> 
                    <th>Tanggungan</th> 
                </tr>
            </thead>
            <tbody>
<?php
    if(isset($_POST['submitted'])){
        include('connect.php');
        $category=$_POST['category'];
        $criteria=$_POST['criteria'];
        $query="SELECT * FROM schools WHERE $category = '$criteria'";
        $result=mysqli_query($dbcon,$query) or die('error getting data');

        while ($row = mysqli_fetch_array($result,MYSQL_ASSOC)){
            echo"<tr><td>".$row['kod_sekolah'];
            echo"</td><td>".$row['nama_sekolah'];
            echo"</td><td>".$row['ptj'];
            echo"</td><td>".$row['server'];
            echo"</td><td>".$row['pc'];
            echo"</td><td>".$row['nb'];
            echo"</td><td>".$row['mono_laser'];
            echo"</td><td>".$row['color_laser'];
            echo"</td><td>".$row['dot_matrix'];
            echo"</td><td>".$row['lcd'];
            echo"</td><td>".$row['set_lan'];
            echo"</td><td>".$row['jumlah_kos'];
            echo"</td><td>".$row['dibayar'];
            echo"</td><td>".$row['tanggungan'];
            echo"</td></tr>";
        }
    }
?>
            </tbody>
        </table>
    </body>
</html>

注意：如果这不适用于您的数据，则需要提供样本以获得进一步的帮助。

Answer 3

如果您希望它们每次都符合设定的宽度，请使用css设置精确的像素值

style="width:200px;"

你的表格标题有点搞砸了。当组合在一起时，你的宽度百分比不应超过100％。

如果您想要一个可变宽度，具体取决于浏览器大小，请使用css资源“max-width”和“min-width”。

如何防止桌子被拉伸？

3 个答案: