0

I am using separate header and footer files in my web page, i have included the CSS file into the header and footer files. NowI want to style a table in my page i.e. want to add vertical and horizontal scroll bars.

below is my illustration.

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

The footer and the header use the CSS file the body does not.

Below is the code for the table.

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

below is the code for the CSS

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

}

below is the current picture of the page

current loo of the table

faisal abdulai
  • 3,739
  • 8
  • 44
  • 66
  • What issues are you having? You ned to post your desired result. – M H Jul 15 '15 at 19:54
  • 1
    Also, you only need to include the same css file in your header. – M H Jul 15 '15 at 19:54
  • I am not able to make the table scrollable and cannot fix a height and width for the table – faisal abdulai Jul 15 '15 at 19:56
  • This is a duplicate question. Before it gets closed, here is a link http://www.w3schools.com/html/html_tables.asp . You need to spend a lot of time learning css. Always search before just asking a question. – M H Jul 15 '15 at 19:58
  • An id should be assigned once. And `div.wrapper` does not match `div#wrapper` – danopz Jul 15 '15 at 19:58
  • I have just one css file and it included in the headdr and footer files – faisal abdulai Jul 15 '15 at 19:58
  • possible duplicate of [HTML table scrolling vertical & horizontal](http://stackoverflow.com/questions/2191451/html-table-scrolling-vertical-horizontal) – M H Jul 15 '15 at 20:00
  • Yes, you only need to include it once. – M H Jul 15 '15 at 20:00
  • When I try that , the width of the table is reduced and some columns left out but does not scroll . by the way am using chrome browser – faisal abdulai Jul 15 '15 at 20:03

1 Answers1

0

Your table and div elements have the same ID. You cannot have two elements with the same ID. If you want to give both of them the same name (wrapper in your case) then change ID to class. So, give them a class name of wrapper and remove the ID name.