CSS 笔记三（Tables/Box Model/Outline）

CSS Tables

border

border: border-width border-style border-color|initial|inherit;

border-width

border-width: medium|thin|thick|length|initial|inherit;

border-style

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Table Borders

Example

table, th, td {
border: 1px solid black;
}

border-collapse

Specify whether the table borders are collapsed into a single border or detached as in standard HTML.

border-collapse: separate|collapse|initial|inherit;

border-spacing

Specify the distance between the borders of adjacent cells (only for the "separated borders" model).

border-spacing: length|initial|inherit;

Example

table {
border-collapse: separate;
border-spacing: 10px 50px;
}

Horizontal Alignment

text-align: left|right|center;

Vertical Alignment

vertical-align: top|bottom|middle;

Caption-side

Specify the placement of a table caption.

caption-side: top|bottom|initial|inherit;

Table-layout

Specify the table layout algorithm to be used for a table.

table-layout: auto|fixed|initial|inherit;

Value	Description
auto	Automatic table layout algorithm (this is default): The column width is set by the widest unbreakable content in the cells Can be slow, since it needs to read through all the content in the table, before determining the final layout
fixed	Fixed table layout algorithm: The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells Allows a browser to lay out the table faster than the automatic table layout The browser can begin to display the table once the first row has been received

Empty-cells

Specify whether or not to display borders and background on empty cells in a table (only for the "separated borders" model).

empty-cells: show|hide|initial|inherit;

Table Padding

Control the space between the border and the content in a table

Example

th, td {
padding: 15px;
text-align: left;
}

Use the

:hover

selector on <tr> to highlight table rows on mouse over

tr:hover {background-color: #f5f5f5}

Striped Tables

Use the

nth-child()

selector and add a

background-color

to all even (or odd) table rows

tr:nth-child(even) {background-color: #f2f2f2}

Responsive Table

display a horizontal scroll bar if the screen is too small to display the full content

Example

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

CSS Box Model


Explanation of the different parts:

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

Width and Height of an Element

Important:

　　When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

Example

div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

CSS Outline

An outline is a line drawn around an element - outside the border.

The outline is NOT a part of an element's dimensions.

the element's total width and height is not affected by the width of the outline.

outline-style

values

dotted

- Defines a dotted outline

dashed

- Defines a dashed outline

solid

- Defines a solid outline

double

- Defines a double outline

groove

- Defines a 3D grooved outline. The effect depends on the outline-color value

ridge

- Defines a 3D ridged outline. The effect depends on the outline-color value

inset

- Defines a 3D inset outline. The effect depends on the outline-color value

outset

- Defines a 3D outset outline. The effect depends on the outline-color value

none

- Defines no outline

hidden

- Defines a hidden outline

Example

p {
border: 1px solid black;
outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Result

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Outline - Shorthand property

same to border

Example

p {
border: 1px solid black;
outline: 5px dotted red;
}

Specify the space between an outline and the edge or border of an element

outline-offset: length|initial|inherit;

Example:

div {
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
}