javascript - 如何给表格的 <tr> 标签内的 div 增加宽度？

Question

我正在尝试在我的页面中实现一个表格。其中一个值渲染太大，在表格单元格中看起来很奇怪。有什么办法可以利用另一个 <td> 的额外宽度吗？对于特定的 div(我不想将 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>

附上我的表格 View 的屏幕截图，以便更深入地了解我的问题。有人可以帮我找到解决方法吗？

Answer 1

以像素为单位赋予容器宽度不是一个好主意。它使它完全绝对并且宽度不会在不同的分辨率下调整。您可以使用百分比。对于您的特定问题，您可以尝试根据内容计算应应用的百分比。然后使用绑定(bind)将百分比宽度分配给容器。