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

Question

＆＃13;

＆＃13;

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

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

＆＃13;

 
    <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>

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 1

嗯，不确定你想要的最终结果。但我得到了3个不同的结果，请参阅下面的片段

1. 所有td都有宽度（包括空的）
＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;
1. 只有包含内容的td有宽度
＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;
1. 绝对位置元素的宽度等于父级td
＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;