> For the complete documentation index, see [llms.txt](https://dotnetweb30-ke.gitbook.io/ke/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dotnetweb30-ke.gitbook.io/ke/construction-web/javascript-html-css/css-tables-properties.md).

# CSS: Tables properties

### Table Borders

To specify table borders in CSS, use the `border` property.

The example below specifies a black border for \<table>, \<th>, and \<td> elements:

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

Notice that the table in the example above has double borders. This is because both the table and the \<th> and \<td> elements have separate borders.

### Collapse Table Borders

The `border-collapse` property sets whether the table borders should be collapsed into a single border:

```css
table {
  border-collapse: collapse;
}

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

If you only want a border around the table, only specify the `border` property for \<table>:

```css
table {
  border: 1px solid black;
}
```

### Table Width and Height

Width and height of a table are defined by the `width` and `height` properties.

The example below sets the width of the table to 100%, and the height of the \<th> elements to 50px:

```css
table {
  width: 100%;
}

th {
  height: 50px;
}
```

### Horizontal Alignment

The `text-align` property sets the horizontal alignment (like left, right, or center) of the content in \<th> or \<td>.

By default, the content of \<th> elements are center-aligned and the content of \<td> elements are left-aligned.

The following example left-aligns the text in \<th> elements:

```css
th {
  text-align: left;
}
```

### Vertical Alignment

The `vertical-align` property sets the vertical alignment (like top, bottom, or middle) of the content in \<th> or \<td>.

By default, the vertical alignment of the content in a table is middle (for both \<th> and \<td> elements).

The following example sets the vertical text alignment to bottom for \<td> elements:

```css
td {
  height: 50px;
  vertical-align: bottom;
}
```

### Table Padding

To control the space between the border and the content in a table, use the `padding` property on \<td> and \<th> elements:

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

### Horizontal Dividers

| First Name | Last Name | Savings |
| ---------- | --------- | ------- |
| Peter      | Griffin   | $100    |
| Lois       | Griffin   | $150    |
| Joe        | Swanson   | $300    |

Add the `border-bottom` property to \<th> and \<td> for horizontal dividers:

```css
th, td {
  border-bottom: 1px solid #ddd;
}
```

### Hoverable Table

Use the `:hover` selector on \<tr> to highlight table rows on mouse over:

| First Name | Last Name | Savings |
| ---------- | --------- | ------- |
| Peter      | Griffin   | $100    |
| Lois       | Griffin   | $150    |
| Joe        | Swanson   | $300    |

```css
tr:hover {background-color: #f5f5f5;}
```

### Striped Tables

| First Name | Last Name | Savings |
| ---------- | --------- | ------- |
| Peter      | Griffin   | $100    |
| Lois       | Griffin   | $150    |
| Joe        | Swanson   | $300    |

For zebra-striped tables, use the `nth-child()` selector and add a `background-color` to all even (or odd) table rows:

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

### Table Color

The example below specifies the background color and text color of \<th> elements:

| First Name | Last Name | Savings |
| ---------- | --------- | ------- |
| Peter      | Griffin   | $100    |
| Lois       | Griffin   | $150    |
| Joe        | Swanson   | $300    |

```css
th {
  background-color: #4CAF50;
  color: white;
}
```

### Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:

| First Name | Last Name | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
| ---------- | --------- | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ |
| Jill       | Smith     | 50     | 50     | 50     | 50     | 50     | 50     | 50     | 50     | 50     | 50     | 50     | 50     |
| Eve        | Jackson   | 94     | 94     | 94     | 94     | 94     | 94     | 94     | 94     | 94     | 94     | 94     | 94     |
| Adam       | Johnson   | 67     | 67     | 67     | 67     | 67     | 67     | 67     | 67     | 67     | 67     | 67     | 67     |

Add a container element (like \<div>) with `overflow-x:auto` around the \<table> element to make it responsive:

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

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

</div>
```

**Note:** In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).