Question: I have a number of tables with the same columns and it would look a lot nicer if they shared the same column widths. Is such a thing possible? Putting them in the same table with some rows with no borders between them isn't an option.

**Edit:** Yeah I'm aware I can fix the widths myself but I was hoping for something that would tie in to the browser's column width algorithm but simply tied two or more tables together for the purpose of doing that layout.

I didn't think such a thing was possible but I thought I'd check just in case.

Answer: 
It's only possible if you can fix-width the columns. If you can set a fixed width then some css like this should work:

```
td {
    width: 25%;
}

```

You can customize each columns width like this:

```
<table>
  <tr>
    <td class="col1">...</td>
    <td class="col2">...</td>
  </tr>
</table>
...
<table>
  <tr>
    <td class="col1">...</td>
    <td class="col2">...</td>
  </tr>
</table>

```

and then specify the widths like this:

```
.col1 {
   width: 25%;
}
.col2 {
   width: 75%;
}

```
You can sync the column widths by combining the tables (as suggested by @Stefanvds), but using a `tbody` + `th` for each:

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

table thead,
table tbody {
  border-bottom: solid;
}

table tbody th {
  text-align: left;
}
```

```html
<table>
  <thead>
    <tr> <th> ID <th> Measurement <th> Average <th> Maximum
  <tbody>
    <tr> <td> <th scope=rowgroup> Cats <td> <td>
    <tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
    <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
  <tbody>
    <tr> <td> <th scope=rowgroup> English speakers <td> <td>
    <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
    <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
</table>
```

Source: [Example in the HTML spec itself](https://html.spec.whatwg.org/multipage/tables.html#the-th-element)