CODEWITHSUNDEEP
htmlcsswordpresshtml-table
RobbertT
RobbertT

Reputation: 253

Determine width of <td> based on width <td> below?

I was wondering if it is possible to determine the width of the tag, based on the width of the tag below.

I currently have this table:

<table>
  <tr>
    <td>This title is way too long and screws up my style</td>
    <td>Title2</td>
    <td>Title 3</td>
  </tr>
  <tr>
    <td><img src="http://domain.com/image1.jpg" /></td>
    <td><img src="http://domain.com/image2.jpg" /></td>
    <td><img src="http://domain.com/image3.jpg" /></td>
  </tr>
</table>

Is there anyway to scale the Title tags based on the width of the images below?

Hope it is clear.

Upvotes: 1

Views: 257

Answers (2)

Tarun Kumar
Tarun Kumar

Reputation: 518

I can suggest a way with jquery . check this code :

if this you table.Give an id to it .

<table id='mytable'>
  <tr>
    <td>This title is way too long and screws up my style</td>
    <td>Title2</td>
    <td>Title 3</td>
  </tr>
  <tr>
    <td><img src="http://domain.com/image1" /></td>
    <td><img src="http://domain.com/image2" /></td>
    <td><img src="http://domain.com/image3" /></td>
  </tr>
</table>

So in the script part

<script>
$(document).ready(function () {
            $('#myTable > tr > td').click(function () {
                 var width = $(this).next('td').children('img').prop('width');
                 $(this).prop('width',''+width+'px');
            });
});
</script>

Upvotes: 0

Nikita Tkachenko
Nikita Tkachenko

Reputation: 2146

This might be considered a bit of a hack, but if you set the width of cells in the upper row to have a minimum acceptable value, the cells in the second row will expand the columns. Here's a sample:

 <style>
     tr.titles td {
         width: 1px;
     }
 </style>

<table>
  <tr class="titles">
    <td>This title is way too long and screws up my style</td>
  </tr>
  <tr>
    <td><img src="http://domain.com/image2"/></td>
  </tr>
</table>

So in this case it will be the image, that determines the width of the column, and the overall width will be equal to the image width.

Upvotes: 1

Related Questions