在表格单元格中垂直对齐图标，该图标还包含文本，而不会使列明显变宽

如何解决在表格单元格中垂直对齐图标，该图标还包含文本，而不会使列明显变宽

我有下表，它只是示例，我可以在短时间内通知。我的问题在第四栏中，我有一个图标，一些文字，然后是另一个图标。这是我要找的东西：

我希望第一个图标和文本像现在一样向左对齐。
我希望第二个图标始终在各行之间垂直对齐。
我希望第二个图标始终位于该行中最长的文本行的结尾处，如果文本太长，则不要与该文本重叠。
即使文本中的数字为6或7位数字且窗口太窄以至于当前实现由于填充而将第二个图标推到第二行，这也应该起作用。例如，下图是缩小窗口范围时的当前实现。除非没有其他选择，否则我不希望图标被包裹在下一行。

我尝试了几种选择：

当前实施；
position：图标的绝对位置，position：相对于带有填充的单元格的相对位置（有效，但不适用于狭窄的窗口。第一幅图像未填充，第二幅图像具有填充）；

位置：相对图标的右侧：100px;

我不确定我还能尝试什么。这是一个棘手的问题，我已经与我们的网页设计师讨论过，但是由于技术原因，他无法自己看代码。我的目标实质上是，文本和图标之间的空间应保持相对较短，图标垂直对齐，如果窗口需要减小表格的宽度，则右边的空间应缩小。

/* ==========================================================================
 # WIZARD
 ========================================================================== */


/**
 * 1. c-wizard: components for wizards,e.g. "Phase Mass Replace".
 *
 */


/* BEM Blocks
 ========================================================================== */

.c-desktop {
  border-collapse: collapse;
  border-spacing: 0;
}

.c-desktop-association {}


/* BEM Elements & modifiers
 ========================================================================== */

.c-desktop .c-table-display__header {
  border: 1px solid #fff;
  border-bottom: 2px solid #a6a2a3;
  background-color: #f3f7fc;
  color: #263340;
  background-image: none;
  font-weight: bold;
  font-weight: normal;
  overflow: hidden;
  word-break: normal;
}

.c-desktop .c-desktop-association__association-item-cell {
  border-color: inherit;
  text-align: left;
  vertical-align: top;
  overflow: hidden;
  word-break: normal;
}

.c-desktop-association {
  border-top: 3px solid #a6a2a3;
}

.c-desktop-association tr:last-child {
  border-bottom: 2px solid #a6a2a3;
}


/*Hoogte instellen via "line-height"*/

.c-desktop .c-desktop-association:after {
  content: "-";
  visibility: hidden;
  display: table-row-group;
  line-height: 0.25;
}

.c-desktop-association__association-item {
  background-color: #f3f7fc;
  color: #263340;
  font-size: 12px;
  font-weight: normal;
  height: 20px;
  text-align: left;
}

td.c-desktop-association__association-item-cell {
  font-variant: normal;
  font-weight: normal;
  font-size: 11px;
  text-align: left;
  padding: 4px 4px 4px 4px;
  vertical-align: top;
  border-top: 1px solid #a6a2a3;
  color: #263340;
  vertical-align: middle;
  overflow: hidden;
  word-break: normal;
}

td.c-desktop-association__association-type,td.c-desktop-association__remove-association {
  font-variant: normal;
  font-size: 11px;
  text-align: left;
  padding: 4px;
  height: 100%;
  border: 0px;
  color: #263340;
}

.c-desktop .c-desktop-association__association-item-cell--latest {
  box-sizing: border-box;
}

.c-desktop-association__association-item-related-icon {
  float: right;
  padding-right: 100px;
  box-sizing: border-box;
}

.u-width-full {
  width: 100%;
}

<table class="c-desktop c-table-display u-width-full" id="desktopAssociationTable">
  <thead>
    <tr>
      <th class="c-table-display__header">Type</th>
      <th class="c-table-display__header">Level</th>
      <th class="c-table-display__header">Active Build</th>
      <th class="c-table-display__header">Latest</th>
      <th class="c-table-display__header">Latest Success</th>
      <th class="c-table-display__header">Next</th>
      <th class="c-table-display__header">Action</th>
      <th class="c-table-display__header">Message</th>
      <th class="c-table-display__header"></th>
    </tr>
  </thead>
  <tbody class="dojoDndItem c-desktop-association" id="1" dnddata="277">
    <tr class="c-desktop-association__association-item c-desktop-association__association-item--odd">
      <td class="dndSubrow c-desktop-association__association-item-cell c-desktop-association__association-type">
        <b>Level: </b> COMMON / H_1-0
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell">

        CONTBUILD
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell">
        228
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell c-desktop-association__association-item-cell--latest">
        <img src="https://i.stack.imgur.com/n7Ycz.jpg?s=16&g=1" title="Success">
        <a href="/alm/levelRequestDetails.action?levelRequestOid=1268">1268</a>&nbsp;[8/21/20,1:04 PM] &nbsp;
        <a href="/alm/levelRequestOverviewDisplay.action?searchView.projectName=COMMON&amp;searchView.projectStreamBuildPrefix=1-0&amp;searchView.projectStreamBuildSuffix=&amp;searchView.levelName=CONTBUILD&amp;searchView.showHiddenPackages=-1&amp;searchView.showHiddenProjectStreams=-1"><img class="c-desktop-association__association-item-related-icon" src="https://i.stack.imgur.com/n7Ycz.jpg?s=16&g=1" title=""></a>
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell">
        <img src="https://i.stack.imgur.com/n7Ycz.jpg?s=16&g=1" title="Success">
        <a href="/alm/levelRequestDetails.action?levelRequestOid=1268">1268</a>&nbsp;[8/21/20,1:04 PM]

      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell">
        9/24/19,2:30 PM
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell">
        <a href="displayLevelRequestCreate.action?createMode=request&amp;projectStreamOid=2&amp;levelOid=4&amp;packageOid=" class="c-table-display__action-icon"><img src="https://i.stack.imgur.com/n7Ycz.jpg?s=16&g=1" title="Request"></a>
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell">

      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell c-desktop-association__remove-association js-remove-selected-rows-node">
        <img src="https://i.stack.imgur.com/n7Ycz.jpg?s=16&g=1" title="Remove">
      </td>
    </tr>
  </tbody>
  <tbody class="dojoDndItem c-desktop-association" id="1" dnddata="277">
    <tr class="c-desktop-association__association-item c-desktop-association__association-item--odd">
      <td class="dndSubrow c-desktop-association__association-item-cell c-desktop-association__association-type">
        <b>Level: </b> COMMON / H_1-0
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell">

        CONTBUILD
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell">
        228
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell c-desktop-association__association-item-cell--latest">
        <img src="https://i.stack.imgur.com/n7Ycz.jpg?s=16&g=1" title="Success">
        <a href="/alm/levelRequestDetails.action?levelRequestOid=1268">1268</a>&nbsp;[8/21/20,2:30 PM
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell">
        <a href="displayLevelRequestCreate.action?createMode=request&amp;projectStreamOid=2&amp;levelOid=4&amp;packageOid=" class="c-table-display__action-icon"><img src="https://i.stack.imgur.com/n7Ycz.jpg?s=16&g=1" title="Request"></a>
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell">

      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell c-desktop-association__remove-association js-remove-selected-rows-node">
        <img src="https://i.stack.imgur.com/n7Ycz.jpg?s=16&g=1" title="Remove">
      </td>
    </tr>
  </tbody>
</table>

在表格单元格中垂直对齐图标，该图标还包含文本，而不会使列明显变宽

如何解决在表格单元格中垂直对齐图标，该图标还包含文本，而不会使列明显变宽

相关推荐