This is the left border.
The column width will automatically adjust to be the absolute minimum required to accommodate the contents of the border.
Related Pages
| |
This page uses left, right, top and bottom shared borders with the minimum of CSS to centre the page with a width of 760px. The method of construction is described at centred-tables.aspx. This example also includes a table within the content area and shows how to render this correctly.
|
Note that the method used here will affect EVERY table in the page - other CSS must be used in author or database generated tables (that is all those tables that are not used for laying out the shared borders) to counteract the width setting given to all tables.
|
| Some CSS has been added to that already described to place borders around this table, move it over to the left, and change the width from 760px. All the CSS is: |
<style type="text/css"> |
Open style block - this goes in the <head> section of the page (just before the </head> tag. |
table {
padding: 0;
width: 760px;
margin: 0 auto;
} |
For all tables, set
padding to 0,
width to 760px,
top and bottom margins to 0, and
left and right margins to auto. auto means that the left and right margin will be identical and the table centralised |
td {
padding: 0;
vertical-align: top;
} |
For all table cells, set
padding to 0, and vertical alignment to top. |
#table1 {
border: 2px solid green;
margin: 0;
} |
For this table, given in code view id="table1", set outside borders to green, and set the margins to 0, thus causing the table to abut the left margin of the content area. |
#table1 td {
padding: 3px;
border: 1px solid green;
} |
For all cells in this table set padding to 3px, and set the cell borders to green.
This does not affect cells in any other tables - except those cells in tables nested within this one. |
.w100 {
width: 100%;
} |
Use a class to define the width - in this case w100, which is defined to set the width to 100% of the space available. This class can be applied to any element in the page. |
.w95 {
width: 95%;
} |
Another class to define a width. This is used to restrict the size of the red boxed area in the cell to the left. |
</style> |
Close style block. |
| |
This is the right border.
The column width will automatically adjust to be the absolute minimum required to accommodate the contents of the border.
|
