使用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文件。

以下是该表的代码。

＆＃13;

＆＃13;

   <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>

＆＃13;

＆＃13;

＆＃13;

下面是CSS的代码

＆＃13;

＆＃13;

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

}

＆＃13;

＆＃13;

＆＃13;

下面是页面的当前图片

Answer 1

您的table和div元素具有相同的ID。您不能拥有两个具有相同ID的元素。如果要为它们两者指定相同的名称（在您的情况下为wrapper），则将ID更改为class。因此，请为其指定wrapper的班级名称并删除ID名称。