如何给表格的div内部标签附加宽度？

Question

我正在尝试在页面中实现一个表。值之一是渲染太大，在表单元格中看起来很奇怪。有什么方法可以为特定的div利用另一个<td>的额外宽度（我不想为colspan使用td）。因此，要实现这一点，我需要扩展该特定DIV的宽度。给div一个宽度并显示绝对属性是一个坏主意！我该怎么办？

我的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="p-t-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="p-t-xs">
        {{request.type}}
      </div>
    </td>
    <td>
      <div class="minutes-desc-container">
        <div class="p-t-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="p-t-xs">
        {{request.bookNo}}
      </div>
    </td>
    <td>
      <div class="p-t-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>

附上我的表格视图的屏幕快照，以更深入地了解我的问题。有人可以帮我得到解决方法吗？

Answer 1

以像素为单位的容器宽度不是一个好主意。它使其完全绝对，并且宽度不会在不同分辨率下进行调整。您可以使用百分比。对于您的特定问题，您可以尝试使用基于内容的百分比来计算。然后使用绑定分配百分比宽度到容器。