Question

我想在我的html动态表中垂直添加一个滚动条。我把我的桌子放在一个div中，但似乎没有用。请帮忙

这是我的HTML代码

<thead>
    <tr> 
        <td colspan="5">
            <div class="scrollit">
              <th><span>ID</span></th> 
              <th><span>Name</span></th>
              <th><span>Location</span></th>
              <th><span>Date</span></th>
              <th><span>Catagory</span></th>
           </div>
        </td>
    </tr>
</thead>

php code

  print "<tr>"; 
  print "<td>";
  print "<div>";
  print "<td >" . $row['ID'] . "</td>"; 
  print "<td >" . $row['Name'] . "</td>"; 
  print "<td >" . $row['Location'] . "</td>"; 
  print "<th >" . $row['Date'] . "</th>";
  print "<td >" . $row['Category'] . "</td>";    
  print "</div>";
  print "</td>";
  print "</tr>"; 
  }               
  print "</table>";

css代码：

.scrollit {
  overflow:scroll;
  height:100px;
}

顺便说一句，我从数据库中检索数据到表。

Answer 1

您的HTML代码中存在一些语法错误，请查看下面的更新代码段

.scrollit {
    width:100%;
    overflow:scroll;
    height:300px;
    display: block;
}

<div class="scrollit">
    <table width="100%">
        <thead>
            <tr>
                <th><span>ID</span></th>
                <th><span>Name</span></th>
                <th><span>Location</span></th>
                <th><span>Date</span></th>
                <th><span>Catagory</span></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
            <tr>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
                <td>lorem ipsum</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 2

尝试这样的事情：

＆＃13;

.tbl_container{
  height: 50px;
  overflow-y: scroll;
}

＆＃13;

<div class="tbl_container">
  <table border="1">
    <tr>
      <td>row1 col1</td>
      <td>row1 col2</td>
    </tr>
    <tr>
      <td>row2 col1</td>
      <td>row2 col2</td>
    </tr>
    <tr>
      <td>row3 col1</td>
      <td>row3 col2</td>
    </tr>
  </table>
</div>

＆＃13;

垂直向表格添加滚动条

2 个答案: