使用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名稱。