2 Replies - 2701 Views - Last Post: 19 January 2012 - 07:23 PM

#1 nielsen   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 17-July 11

How to prevent table being stretched?

Posted 19 January 2012 - 05:19 PM

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.

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

    }


    ?>



This post has been edited by nielsen: 19 January 2012 - 05:24 PM


Is This A Good Question/Topic? 0
  • +

Replies To: How to prevent table being stretched?

#2 Slice   User is offline

  • sudo pacman -S moneyz


Reputation: 253
  • View blog
  • Posts: 761
  • Joined: 24-November 08

Re: How to prevent table being stretched?

Posted 19 January 2012 - 06:05 PM

Your code is a complete jumble. Why do you have a stylesheet twice, with one being outside of the <head>?

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

    table {
      background-color:#EBEBEB; /*background line 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>
 </head>
<body>

<!-- webpage content -->

</body>
</html>



I don't think that will solve your problem, but I'm not too sure what your problem is. Which part of the table is expanding?

EDIT: Just noticed a few other things, you use some classes (style1 + style2) but have not defined it anywhere in you CSS. Also try reading up on code seperation.

This post has been edited by Slice: 19 January 2012 - 06:13 PM

Was This Post Helpful? 0
  • +
  • -

#3 nielsen   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 17-July 11

Re: How to prevent table being stretched?

Posted 19 January 2012 - 07:23 PM

The height is expanding according to the number of data being searched.If the data searched is displayed in 2 rows, the height of the column will be stretch to fit the scroll bar.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1