html - 表格不滚动

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

overflow: scroll 并非所有浏览器都支持 Table 和 Table Body 标签。我相信 Firefox 做对了，但我知道 IE 不会。它完全取决于版本。有许多 css/js 解决方案可以解决这个问题(搜索 CSS Play 可以找到大部分时间都有效的解决方案)。但这不是简单地使用 css 属性的问题。它们中的大多数都需要额外的容器 div，并且通常需要多个表格。