使用 CSS 将 HTML 表格样式设置为带有单独页眉和页脚文件的页面正文

Question

我在我的网页中使用单独的页眉和页脚文件，我已将 CSS 文件包含在页眉和页脚文件中。现在我想在我的页面中设置一个表格的样式，即想要添加垂直和水平滚动条。

下面是我的插图。

---------------------------------------------------------------------
|                header foo1.php                                    |
|    <link rel="stylesheet" type="text/css" href="myStyle.css">     |   
|-------------------------------------------------------------------|
| Body            foo2.php                                          |
|   **Table placed Here**                                           |
|                                                                   |
--------------------------------------------------------------------- 
|            Footer foo3.php                                        |
|    <link rel="stylesheet" type="text/css" href="myStyle.css">     |
|                                                                   |
---------------------------------------------------------------------

页脚和页眉使用正文不使用的 CSS 文件。

下面是表格的代码。

   <div id=wrapper>
  <table id=wrapper >
<tr>
<td>&nbsp;</td>
<td colspan="6"><strong>Update data in mysql</strong> </td>
</tr>
<tr>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
</tr>
            <tr>
                <td align="center">&nbsp;</td>
                <td align="center"><strong>ID</strong></td>
                <td align="center"><strong>FirstName</strong></td>
                <td align="center"><strong>Lastname</strong></td>
                <td align="center"><strong>Request</strong></td>
                <td align="center"><strong>Purpose</strong></td>
                <td align="center"><strong>Description</strong></td>
                <td align="center"><strong>Booking Time</strong></td>
                <td align="center"><strong>Access Time</strong></td>
                <td align="center"><strong>Exit Time</strong></td>
                <td align="center"><strong>Approved</strong></td>
                <td align="center"><strong>Approved By</strong></td>
            </tr>
<tr>
<td>&nbsp;</td>
<td align="center">
<input name="id" type="text" id="id" value="<?php echo $rows['id']; ?>">
</td>

<td align="center">
<input name="firstname" type="text" id="firstname" value="<?php echo $rows['fisrt_name']; ?>">
</td>
<td align="center">
<input name="lastname" type="text" id="lastname" value="<?php echo $rows['last_name']; ?>" size="15">
</td>
<td>
<input name="description" type="text" id="description" value="<?php echo $rows['description']; ?>" size="15">
</td>
<td>
<input name="description" type="text" id="request" value="<?php echo $rows['request']; ?>" size="15">
</td>
<td>
<input name="description" type="text" id="description" value="<?php echo $rows['description']; ?>" size="15">
</td>
<td>
<input name="description" type="text" id="booking_time" value="<?php echo $rows['booking_time']; ?>" size="15">
</td>
<td>
<input name="description" type="text" id="access_time" value="<?php echo $rows['access_time']; ?>" size="15">
</td>
<td>
<input name="description" type="text" id="exit_time" value="<?php echo $rows['exit_time']; ?>" size="15">
</td>
<td>
<input name="description" type="text" id="approved" value="<?php echo $rows['approved']; ?>" size="15">
</td>
<td>
<input name="description" type="text" id="approved_by" value="<?php echo $rows['approved_by']; ?>" size="15">
</td>


</tr>
<tr>
<td>&nbsp;</td>
<td>
<input name="id" type="hidden" id="id" value="<?php echo $rows['id']; ?>">
</td>
<td align="center">
<input type="submit" name="Submit" value="Submit">
</td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>

下面是 CSS 的代码

div.wrapper{
height:500px;
widht:500px;
overflow:auto;

}

下面是页面的当前图片

Answer 1

您的table 和div 元素具有相同的ID。不能有两个元素具有相同的ID。如果您想给他们两个同名（在您的情况下为wrapper），则将 ID 更改为 class。所以，给他们一个类名wrapper 并删除ID 名称。