如何将基于百分比的宽度（相对于元素位置）设置为表格单元格内的绝对定位元素？答案

【问题标题】：How to set percentage based width (relative to the element position) to absolute postitioned element inside a table cell?如何将基于百分比的宽度（相对于元素位置）设置为表格单元格内的绝对定位元素？
【发布时间】：2017-05-25 17:02:01
【问题描述】：

  .source-document-annotator-wrapper {
      position:absolute;
      /* display:table-row; */
      }

      .source-document-annotator-wrapper > .document-annotator{
      /* position: relative; */
      z-index: 2;
      top: -120px;
      /* width: 800px; */
      }

 
    <table>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td>Unmapped</td>
                <td>
                    <a href="" ng-init="showAnnotator = false" ng-click="vm.showAnnotatorFor(this, level2ServiceMapping.leaves[0].rpfpdocid, level2ServiceMapping.leaves, 'requirement')"><img src="images/carbon-theme-ui/source_icon.png"></a>
                    <div class="source-document-annotator-wrapper right ng-scope" ng-if="showAnnotator">
                        <div class="document-annotator arrow-box">
                            <span class="close-button" ng-click="$parent.showAnnotator = false" title="Close annotator">×</span>
                            <div active="active">
                            </div>
                        </div>
                    </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

.source-document-annotator-wrapper 必须是一个带有指向相应表格单元格源图标的箭头的对话框

虽然没有为表格单元格指定宽度，但如何让.source-document-annotator-wrapper 占据最大宽度？

【问题讨论】：

标签： html css position width

【解决方案1】：

hmm 不确定您希望最终结果如何。但我得到了 3 个不同的结果，请参见下面的 sn-ps

所有 td 都有宽度（包括空的）

.source-document-annotator-wrapper {
  position: absolute;
  /* display:table-row; */
  width: 100%;
	background:Red;
}

.source-document-annotator-wrapper > .document-annotator {
  /* position: relative; */
  z-index: 2;
  top: -120px;
  /* width: 800px; */
}

table {
  table-layout: fixed;
  width: 100%;
}

tr {
  width: 100%;
}

td {
  position: relative;
}

<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Unmapped</td>
      <td>
        <a href="" ng-init="showAnnotator = false" ng-click="vm.showAnnotatorFor(this, level2ServiceMapping.leaves[0].rpfpdocid, level2ServiceMapping.leaves, 'requirement')"><img src="images/carbon-theme-ui/source_icon.png"></a>
        <div class="source-document-annotator-wrapper right ng-scope" ng-if="showAnnotator">
          <div class="document-annotator arrow-box">
            <span class="close-button" ng-click="$parent.showAnnotator = false" title="Close annotator">×</span>
            <div active="active">
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

只有包含内容的 td 才有宽度

.source-document-annotator-wrapper {
  position: absolute;
  /* display:table-row; */
  width: 100%;
	background:Red;
}

.source-document-annotator-wrapper > .document-annotator {
  /* position: relative; */
  z-index: 2;
  top: -120px;
  /* width: 800px; */
}

table {
  width: 100%;
}

tr {
  width: 100%;
}

td {
  position: relative;
}

<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Unmapped</td>
      <td>
        <a href="" ng-init="showAnnotator = false" ng-click="vm.showAnnotatorFor(this, level2ServiceMapping.leaves[0].rpfpdocid, level2ServiceMapping.leaves, 'requirement')"><img src="images/carbon-theme-ui/source_icon.png"></a>
        <div class="source-document-annotator-wrapper right ng-scope" ng-if="showAnnotator">
          <div class="document-annotator arrow-box">
            <span class="close-button" ng-click="$parent.showAnnotator = false" title="Close annotator">×</span>
            <div active="active">
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

绝对位置元素的宽度等于父 td

.source-document-annotator-wrapper {
  position: absolute;
  /* display:table-row; */
  width: 100%;
	background:Red;
}

.source-document-annotator-wrapper > .document-annotator {
  /* position: relative; */
  z-index: 2;
  top: -120px;
  /* width: 800px; */
}

tr {
  width: 100%;
}


td {
  position: relative;
}

<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Unmapped</td>
      <td>
        <a href="" ng-init="showAnnotator = false" ng-click="vm.showAnnotatorFor(this, level2ServiceMapping.leaves[0].rpfpdocid, level2ServiceMapping.leaves, 'requirement')"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico"></a>
        <div class="source-document-annotator-wrapper right ng-scope" ng-if="showAnnotator">
          <div class="document-annotator arrow-box">
            <span class="close-button" ng-click="$parent.showAnnotator = false" title="Close annotator">×</span>
            <div active="active">
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：