问使HTML表格适合特定区域
EN

Stack Overflow用户

提问于 2018-07-02 03:02:58

回答 1查看 104关注 0票数 1

我正在构建一个HTML表，该表显示来自MySQL数据库的信息，该表具有更新或删除数据库中行的函数。

下面是我当时的代码：

<table>
<tr>
    <th>Name</th>
    <th>Email</th>
    <th>Program</th>
    <th>Class</th>
    <th>Start Date</th>
    <th>End Date</th>
    <th>Country</th>
</tr>

<?php

    $db = JFactory::getDBO();

    $query = "SELECT * FROM  student_management_module";

    $db->setQuery($query);
            $rows = $db->loadObjectList();

            foreach ($rows as &$row) {
                echo "<form action=index.php/component/studentmanagement/?task=update method=post>";
                echo "<tr>";
                echo "<td>" . "<input type=text name=fname id=name_val value=" .$row->name. " </td>";
                echo "<td>" . "<input type=text name=email id=email_val value=" .$row->email. " </td>";
                echo "<td>" . "<input type=text name=prog id=prog_val value=" .$row->program. " </td>";
                echo "<td>" . "<input type=text name=class id=class_val value=" .$row->class. " </td>";
                echo "<td>" . "<input type=text name=sdate id=start_val value=" .$row->start_date. " </td>";
                echo "<td>" . "<input type=text name=edate id=end_val value=" .$row->end_date. " </td>";
                echo "<td>" . "<input type=text name=country id=country_val value=" .$row->country. " </td>";
                echo "<td>" . "<input type=hidden name=hidden value=" .$row->student_id. " </td>";
                echo "<td>" . "<input type=submit name=update value=update". " </td>";
                echo "<td>" . "<input type=submit name=delete value=delete". " </td>";
                echo "</tr>";
                echo "</form>";
            }

    ?>

下面是这些表格目前的样子：

Picture of table

但是列太多，无法放入我想要的空间中。

如何在底部创建水平滚动条，并确保更新和删除按钮与滚动条分开，以便更新和插入按钮始终显示在右侧。

我尝试过CSS overflow属性，但它在滚动中包含插入和删除。

任何帮助都将非常感谢，并提前表示感谢。

php

html

css

回答 1

Stack Overflow用户

发布于 2018-07-02 03:13:43

对于First，您忘记了关闭input标记：

echo "<td>" . "<input type=text name=fname id=name_val value=" .$row->name. "> </td>";
//-----------------------------------------------------------Here------------^

第二，，你在标签中忘记了''：

echo "<td>" . "<input type='text' name='fname' id='name_val' value='" .$row->name. "'> </td>";

第三，，如果你想要一个水平滚动条，你应该看起来像这样：

        html{
          max-width: 100%;
          overflow-x: hidden;
        }
        
        .headcol {
          position: absolute;
          width: 120px;
          left: 0;
          top: auto;
          border-top-width: 1px;
          /*only relevant for first row*/
          margin-top: -1px;
          /*compensate for top border*/
        }

        .div {
          width: 86%;
          overflow-x: scroll;
          margin-left: 5em;
          overflow-y: visible;
          padding: 0;
        }

 <html>
        <div class="div">
        <table style="width: 100%; overflow-x: auto">
              <tr>
                <th></th>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Program</th>
                  <th>Class</th>
                  <th>Student ID</th>
                  <th>Start Date</th>
                  <th>End Date</th>
                  <th>Country</th>
              </tr>
              <tr>
              <form>
              <td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
                
                <td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
                 </form>
              </tr>
              <tr>
              <form>
              <td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
                
                <td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
                 </form>
              </tr>
<tr>
              <form>
              <td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
                
                <td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
                 </form>
              </tr>
<tr>
              <form>
              <td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
                
                <td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
                 </form>
              </tr>
<tr>
              <form>
              <td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
                
                <td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
                 </form>
              </tr>
<tr>
              <form>
              <td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
                
                <td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
                 </form>
              </tr>
<tr>
              <form>
              <td class="headcol"><input type="submit" name="update" value="update"><input type="submit" name="delete" value="delete"></td>
                
                <td><input type="text" name="fname" id="name_val" value=" .$row->name. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->mail. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Program. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Class. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StudentID. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->StartDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->EndDate. "></td>
                <td><input type="text" name="fname" id="name_val" value=" .$row->Country. "></td>
                 </form>
              </tr>

            </table>
        </div>
    </html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51126166

复制

相似问题

问使HTML表格适合特定区域
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使HTML表格适合特定区域EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使HTML表格适合特定区域
EN