---
title: CSS Tables Borders
description: "> The look of an HTML table can be greatly improved with CSS: > > > > > > > > #customers td, #customers th { > border: 1px solid #ddd; > padding: 8px; > } > > > >…"
url: "https://apprentice.mn/docs/css-tables/"
updated: "2021-05-08"
category: CSS
---

# CSS Tables Borders

> The look of an HTML table can be greatly improved with CSS:
>
>
>
>
>
>
>
> #customers td, #customers th {
>  border: 1px solid #ddd;
>  padding: 8px;
>  }
>
>
>
> #customers tr:nth-child(even){background-color: #f2f2f2;}
>
>
>
> #customers tr:hover {background-color: #ddd;}
>
>
>
> #customers th {
>  padding-top: 12px;
>  padding-bottom: 12px;
>  text-align: left;
>  background-color: #4CAF50;
>  color: white;
>  }
>
>
>
>  
>
>
>
> | Company | Contact | Country |
> | --- | --- | --- |
> | Alfreds Futterkiste | Maria Anders | Germany |
> | Berglunds snabbköp | Christina Berglund | Sweden |
> | Centro comercial Moctezuma | Francisco Chang | Mexico |
> | Ernst Handel | Roland Mendel | Austria |
> | Island Trading | Helen Bennett | UK |
> | Königlich Essen | Philip Cramer | Germany |
> | Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
> | Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
> | North/South | Simon Crowther | UK |
> | Paris spécialités | Marie Bertrand | France |
>
>
>
>  

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

| Firstname | Lastname |
| --- | --- |
| Peter | Griffin |
| Lois | Griffin |

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

## Full-Width Table

The table above might seem small in some cases. If you need a table that should span the entire screen (full-width), add `width: 100%` to the <table> element:

      >

| Firstname | Lastname |
| --- | --- |
| Peter | Griffin |
| Lois | Griffin |

     `table {
  width: 100%;
}`

### Double Borders

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

To remove double borders, take a look at the example below.

---

##  

## Collapse Table Borders

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

## Let the borders collapse

| Firstname | Lastname |
| --- | --- |
| Peter | Griffin |
| Lois | Griffin |

     `table {
  border-collapse: collapse;
}`

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

| Firstname | Lastname |
| --- | --- |
| Peter | Griffin |
| Lois | Griffin |

     `table {
  border: 1px solid black;
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-tables%2F&linkname=CSS%20Tables%20Borders](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-tables%2F&linkname=CSS%20Tables%20Borders)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-tables%2F&linkname=CSS%20Tables%20Borders](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-tables%2F&linkname=CSS%20Tables%20Borders)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-tables%2F&linkname=CSS%20Tables%20Borders](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-tables%2F&linkname=CSS%20Tables%20Borders)[https://www.addtoany.com/share](https://www.addtoany.com/share)