CODEWITHSUNDEEP
jquerycss
nyvokub
nyvokub

Reputation: 569

Set width of <td> to <th> dynamically

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?

Upvotes: 4

Views: 9154

Answers (3)

Dalin Huang
Dalin Huang

Reputation: 11342

1st. sum the th length first (by letter length), then update the width by % of th length, see example below: 2nd. wrap your content with <div class="scrollable"> and css:

.scrollable{
  height: 200px;
  overflow: scroll;
}

This allowed you to control the height of the td without set tbody to inline block which breaks the layout.

$(window).resize(function() {
  var total_len = $('thead tr th').text().length;
  $('thead tr th').each(function() {
    pct = $(this).text().length / total_len * 100;
    $(this).width(pct + '%');
  })
}).trigger('resize');
table * {
  border: 1px solid black;
}

table {
  width: 100%;
  display: table;
}

table * {
  border: 1px solid red;
  text-align: center;
}

#my_table thead tr {
  height: 100px;
}

.scrollable{
  height: 200px;
  overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my_table">
  <thead>
    <tr>
      <th>111 121312312 21 1211 31123121</th>
      <th>2222 2 22 22</th>
      <th>3333 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div class="scrollable">tests 11 1 1 1 1 1 111 1 1 1 1 1</div></td>
      <td><div class="scrollable">2 2 2 22 2</div></td>
      <td><div class="scrollable">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.</div></td>
    </tr>
    <tbody>
</table>

Upvotes: 0

lilezek
lilezek

Reputation: 7344

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.

Upvotes: 2

Damian
Damian

Reputation: 173

Just change each th width to a fixed width with 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%;
}
<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)

Upvotes: -1

Related Questions