How to give additional width to the div inside <tr> tag of a table?

Question

I am trying to implement a table in my page. One of the values is rendering too big which looks odd in table cell. Is there any way I can utilize additional width of another <td> for a particular div (I don't want to use colspan for td ). SO to achieve this I need to extend the width of that particular DIV. giving a div a width and display absolute property is a bad idea! What else should I do?

MY html-

 <table> <tr> <th style="width:105px;"> <strong>Sr NO.</strong> </th> <th style="width:65px;"> <strong>Type</strong> </th> <th style="width:165px;"> <strong>Classification</strong> </th> <th style="width:80px;"> <strong>Book No</strong> </th> <th> <strong>Agency</strong> </th> <th> <strong>Date</strong> </th> </tr> <tr ng-repeat="request in msc.minutesData"> <td> <div class="minutes-subject-container"> <div class="pt-xs"> {{request.id}} </div> <div class="flex-container"> <div class="minutes-info--subrow-subject" style="width:105px"> <label>subject</label> <div class="minutes-info--subject"> <span> {{request.subject}} </span> </div> </div> </div> </div> </td> <td> <div class="pt-xs"> {{request.type}} </div> </td> <td> <div class="minutes-desc-container"> <div class="pt-xs"> {{request.classification}} </div> <div class="flex-container"> <div class="minutes-info--subrow-desc" style="width:165px"> <label>Description</label> <div class="minutes-info--descriptiopn"> <span> {{request.description}} </span> </div> </div> </div> </div> </td> <td> <div class="pt-xs"> {{request.bookNo}} </div> </td> <td> <div class="pt-xs"> {{request.agency}} </div> </td> <td style="width:110px;"> <div class="minutes-info"> <div class="minutes-info--firstrow"> <div> <span class="minutes-spanrow"> {{request.date | date: "EEE, d MMM yyyy"}}</span> </div> </div> <div class="flex-container"> <div class="minutes-info--secondrow"> <span class="link-to" ng-click="msc.geturlData(request)"> <img src="img/Doc-Viewer-icon.svg" title="التقرير"> </span> </div> </div> </div> </td> </tr> </table> 

Attaching screenshot of my table view to get more insight of my issue. Could someone help me to get solution approach?

Answer 1

Giving width to a container in pixels is a bad idea. It makes it totally absolute and the width won't adjust in different resolutions. You can use percentage. And for your specific problem, you can use try to calculate the percentage that should be applied based on the content. Then using binding allot the percentage width to the containers.