Question

我正在尝试从搜索到的数据卷轴中创建一个表，但它无法正常工作。我不知道我的CSS是不是有问题。我希望它垂直滚动。：（

这是我用来做表滚动的css代码

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

    <style type="text/css">
    table {
      table-layout:fixed;
         width:100%;
         border:0px solid ; /*border merah d luar*/

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

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

    </style>

这是我要滚动的表的代码。

    <table width='100%' background="pictures/bg.jpg" id='header' color='black'>

      <thead>
        <tr>
        <td width="40%" scope="col"><div align="center"><span class="style2 style1">       </span></div></td> 
         <td width="40%" scope="col"><div align="center"><span class="style2 style1">Kod Sekolah</span></div></td>
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Nama Sekolah</span></div></td>
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">PTJ</span></div></td>
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Server</span></div></td>
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">PC</span></div></td>
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">NB</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Mono Laser</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Color Laser</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Dot Matrix</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">LCD</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Set LAN</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Jumlah Kos</span></div></td> 
          <td width="40%" scope="col"><div align="center"><span class="style2 style1">Dibayar</span></div></td> 
          <td width="50%" scope="col"><div align="center"><span class="style2 style1">Tanggungan</span></div></td> 
        </tr>
      </thead>
    </table>
<?php 
    if(($_REQUEST['action']=="search")or
    ($_REQUEST['criteria']!="")){?>


      <?php 
      do { 
      if($_REQUEST[category]=="negeri"){ $searching=$row_school['negeri'];
      }else if($_REQUEST[category]=="daerah"){ $searching=$row_school['daerah'];
      }else if($_REQUEST[category]=="kod_sekolah"){ $searching=$row_school['kod_sekolah'];}

      if($searching==$_REQUEST[criteria]){

      ?>


      <table width='100%' border="1" id='header' color='black'>
       <thead>
      <tr>

        <td align="left" valign="top" width="7%"><form action="" method="post" name="xsearch" id="xsearch">
          <input name="action" type="hidden" id="action" value="edit">
            <input type="submit" name="edit" id="edit" value="EDIT">
          <input name="id" type="hidden" id="id" value="<?php echo $row_school['id']; ?>">
          <input name="category" type="hidden" id="category" value="<?php echo $_REQUEST['category'];?>">
        </form>
        </td>


        <td align="left" valign="top"><?php echo $row_school['kod_sekolah']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['nama_sekolah']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['ptj']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['server']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['pc']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['nb']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['mono_laser']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['color_laser']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['dot_matrix']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['lcd']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['set_lan']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['jumlah_kos']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['dibayar']; ?></td>
        <td align="left" valign="top"><?php echo $row_school['tanggungan']; ?></td>



      </tr>

      </table>
      </thead>

我希望有人能指出应该纠正的问题。:(

Answer 1

Table和Table Body标签的所有浏览器都不支持

overflow: scroll。我相信Firefox是正确的，但我知道IE不倾向于。它完全依赖于版本。这个问题有很多css / js解决方案（搜索CSS Play适用于大多数时间都可以使用的解决方案）。这不是简单地使用css属性的问题。其中大多数需要额外的容器div，通常需要多个表。

Answer 2

为什么不建立2个不同的表。一个用于头部字段，一个用于数据。
有例子：

< table width="500" border="0"><br>
  < tr><br>
    < td width="33%">Head One</td><br>
    < td width="33%">Head Two</td><br>
    < td width="33%">Head Three</td><br>
  < /tr><br>
  < tr><br>
    < td colspan="3" style="max-height:200px; overflow:auto; <?php //Here it is. ?>"><br>
    < table width="100%" border="0" id="data"><br>
      < tr><br>
        < td width="33%">Data One</td><br>
        < td width="33%">Data Two</td><br>
        < td width="33%">Data Three</td><br>
      < /tr><br>
    < /table></td><br>
  < /tr><br>
</table><br>

表不滚动

2 个答案: