How to prevent table being stretched?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
nielsenN
Forum Newbie
Posts: 17
Joined: Wed Nov 16, 2011 6:46 pm

How to prevent table being stretched?

Post by nielsenN »

I want to prevent the table of the searched data being stretched. If there are many data that are searched, the table size is okay, but when there are small data that are being searched, it will display the data in the stretched table height which looks awkward. I need to know how to prevent the table from stretching.:(

Below are the codes.

Code: Select all

 <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>";

    }


    ?>

User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: How to prevent table being stretched?

Post by social_experiment »

Have you tried setting a minimum height?

Code: Select all

 min-height: 200px;
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Post Reply