Question: I am wondering how to get the width of a `th` and set all of the `td` under this header to be the same width. Next `th` would be a different width and all of the `td` under this `th` would be that appropriate width, different from the first. Essentially trying to line up my `thead` and `tbody` columns relative to eachother. 

The structure of my table is:

```
<table id="my_table">
     <thead>
        <tr>
          <th></th>
          <th></th>
          <th></th>
        </tr>
     </thead>
     <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
     </tbody>
</table>

```

The CSS is as follows for a scroll able table:

```
#my_table thead, #my_table tbody {
        display: inline-block;
        overflow: auto;
        width: 100%;
    }

    #my_table thead{
        height: 100px;
    }

    #my_table tbody{
        height: 300px;
    }

```

The data that goes into th is dynamic and makes the width of the cell different every time. 

Using jQuery, I am stuck with this not sure how to iterate through each `th` and assign the width to its corresponding `td`:

```
var table = document.getElementById('#my_table');

table.find('th').each(function() {
    var header_width = this.width();
    $table.width(header_width);
});

```

Although this is not working. I feel as if I am using the `each()` function incorrectly. Any ideas?

Answer: 
Try this, is ugly and is not efficient but should do what you want to do:

```
var table = document.getElementById('#my_table');

table.find('th').each(function(index) {
    var header_width = this.width();
    table.find('tr').each(function() {
      $(this).find('td:nth-child('+index+')').width(header_width);
    });
});

```

Note: I didn't check the syntax, so it may contain a bug.
Just change each th width to a fixed width with css:

```css
#my-table th,
#my-table tbody td {
    border-width: 0 1px 0 1px;
    border-style: solid;
    border-color: black;
}

#my-table th:first-child {
    width: 20%;
}

#my-table th:nth-child(2) {
    width: 30%;
}

#my-table th:nth-child(3) {
    width: 30%;
}
```

```html
<table id="my-table">
  <thead>
    <tr>
      <th>COLUMN 1 Title</th>
      <th>COLUMN 2 Title</th>
      <th>COLUMN 3 Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum</td>
      <td>Dolor sit ames</td>
      <td>Random Text</td>
    </tr>
    <tr>
      <td>More random text</td>
      <td>Lorem ipsum</td>
      <td>Dolor sit ames</td>
    </tr>
  </tbody>
</table>
```

P.S. Add max-width instead of width to allow them to expand (as much as possible)