Short URL

http://aka.ms/scrollbar


Introduction

When constructing tables in Wiki articles, you might need to limit their size, width and/or height.

You'll need a special construction to control the table, with a <div> tag combination.

 


HTML Code

Table half width - 200 px height

 

#/../

 

<div style = "width: 50%; height: 200px; overflow: scroll;" >

 <!-- Table Content Here -->

 <table style="width: 100%; height: 300pt; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0">

 <colgroup>

 <col>

 <col>

 <col>

 <col>

 </colgroup>

 <tbody>

 <tr>

 <td>START</td>

 <td>Column 2</td>

 <td>Column 3</td>

 <td>Columnn 4</td>

 <td>Column 5</td>

 </tr>

 <tr>

 <td>Row 1</td>

 <td>R1_C2</td>

 <td>R1_C3</td>

 <td>R1_C4</td>

 <td>R1_C5</td>

 </tr>

 </tbody>

</table>

<!-- Table Content Here -->

</div>

/../#

 


Sample tables

Table - full width without scroll bars

START Column 2 Column 3 Column 4 Colum 5
Row 1 R1_C2 R1_C3 R1_C4 R1_C5
Row 2 R2_C2 R2_C3 R2_C4 R2_C5
Row 3 R3_C2 R3_C3 R4_C4 R3_C5
Row 4 R4_C2 R4_C3 R5_C4 R4_C5
Row 5 R5_C2 R5_C3 R5_C4 R5_C5
Row 6 R7_C22 R6_C3 R6_C4 R6_C5
Row 7 R!_C2 R7_C3 R7_C4 R7_C5

 


Table 200px with scroll bars

START Column 2 Column 3 Column 4 Colum 5
Row 1 R1_C2 R1_C3 R1_C4 R1_C5
Row 2 R2_C2 R2_C3 R2_C4 R2_C5
Row 3 R3_C2 R3_C3 R4_C4 R3_C5
Row 4 R4_C2 R4_C3 R5_C4 R4_C5
Row 5 R5_C2 R5_C3 R5_C4 R5_C5
Row 6 R7_C22 R6_C3 R6_C4 R6_C5
Row 7 R!_C2 R7_C3 R7_C4 R7_C5

 


Table half width - 200 px height

START Column 2 Column 3 Column 4 Colum 5
Row 1 R1_C2 R1_C3 R1_C4 R1_C5
Row 2 R2_C2 R2_C3 R2_C4 R2_C5
Row 3 R3_C2 R3_C3 R4_C4 R3_C5
Row 4 R4_C2 R4_C3 R5_C4 R4_C5
Row 5 R5_C2 R5_C3 R5_C4 R5_C5
Row 6 R7_C22 R6_C3 R6_C4 R6_C5
Row 7 R!_C2 R7_C3 R7_C4 R7_C5

 


Table full width - 200px height

START Column 2 Column 3 Column 4 Colum 5
Row 1 R1_C2 R1_C3 R1_C4 R1_C5
Row 2 R2_C2 R2_C3 R2_C4 R2_C5
Row 3 R3_C2 R3_C3 R4_C4 R3_C5
Row 4 R4_C2 R4_C3 R5_C4 R4_C5
Row 5 R5_C2 R5_C3 R5_C4 R5_C5
Row 6 R7_C22 R6_C3 R6_C4 R6_C5
Row 7 R!_C2 R7_C3 R7_C4 R7_C5