Блог

Главная - Вопросы по программированию - Значок выравнивания по вертикали в ячейке таблицы, который также включает текст, не делая столбец значительно шире

Значок выравнивания по вертикали в ячейке таблицы, который также включает текст, не делая столбец значительно шире

#html #css #alignment

#HTML #css #выравнивание

Вопрос:

У меня есть таблица ниже, которая настолько мала, насколько я могу сделать это в кратчайшие сроки. Проблема, с которой я сталкиваюсь, находится в 4-м столбце, у меня есть значок, немного текста, а затем еще один значок. Вот что я ищу:

  • Я хочу, чтобы первые значки и текст были выровнены по левому краю, как сейчас.
  • Я хочу, чтобы вторые значки всегда отображались вертикально выровненными друг с другом по строкам.
  • Я хочу, чтобы вторые значки всегда находились ближе к концу самой длинной строки текста в этой строке, не перекрывая этот текст, если текст становится слишком длинным.
  • Это должно сработать, даже если число в тексте имеет длину 6 или 7 цифр, а окно настолько узкое, что текущая реализация помещает второй значок во вторую строку из-за заполнения. В качестве примера, изображение ниже представляет собой текущую реализацию, когда окно сужено. Я бы предпочел, чтобы значок не переносился на следующую строку, если нет другого варианта.

введите описание изображения здесь

Я попробовал несколько вариантов:

  • текущая реализация;
  • позиция: абсолютная для значка, позиция: относительная для ячейки с отступом (работал, но не с узкими окнами. Первое изображение без заполнения, второе изображение с заполнением);

введите описание изображения здесь
введите описание изображения здесь

  • положение: относительное для значка справа: 100 пикселей;

введите описание изображения здесь

Я не уверен, что еще я могу попробовать. Это сложная проблема, и я обсуждал это с нашим веб-дизайнером, но по техническим причинам он не может сам просмотреть код. По сути, моя цель состоит в том, чтобы пространство между текстом и значком оставалось относительно коротким, значки были выровнены по вертикали, а пространство справа уменьшалось, если окну необходимо уменьшить ширину таблицы.

 /* ==========================================================================
 # 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 amp; 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=16amp;g=1" title="Success">
        <a href="/alm/levelRequestDetails.action?levelRequestOid=1268">1268</a>amp;nbsp;[8/21/20, 1:04 PM] amp;nbsp;
        <a href="/alm/levelRequestOverviewDisplay.action?searchView.projectName=COMMONamp;amp;searchView.projectStreamBuildPrefix=1-0amp;amp;searchView.projectStreamBuildSuffix=amp;amp;searchView.levelName=CONTBUILDamp;amp;searchView.showHiddenPackages=-1amp;amp;searchView.showHiddenProjectStreams=-1"><img class="c-desktop-association__association-item-related-icon" src="https://i.stack.imgur.com/n7Ycz.jpg?s=16amp;g=1" title=""></a>
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell">
        <img src="https://i.stack.imgur.com/n7Ycz.jpg?s=16amp;g=1" title="Success">
        <a href="/alm/levelRequestDetails.action?levelRequestOid=1268">1268</a>amp;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=requestamp;amp;projectStreamOid=2amp;amp;levelOid=4amp;amp;packageOid=" class="c-table-display__action-icon"><img src="https://i.stack.imgur.com/n7Ycz.jpg?s=16amp;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=16amp;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=16amp;g=1" title="Success">
        <a href="/alm/levelRequestDetails.action?levelRequestOid=1268">1268</a>amp;nbsp;[8/21/20, 1:04 PM] amp;nbsp;
        <a href="/alm/levelRequestOverviewDisplay.action?searchView.projectName=COMMONamp;amp;searchView.projectStreamBuildPrefix=1-0amp;amp;searchView.projectStreamBuildSuffix=amp;amp;searchView.levelName=CONTBUILDamp;amp;searchView.showHiddenPackages=-1amp;amp;searchView.showHiddenProjectStreams=-1"><img class="c-desktop-association__association-item-related-icon" src="https://i.stack.imgur.com/n7Ycz.jpg?s=16amp;g=1" title=""></a>
      </td>
      <td class="dndSubrow c-desktop-association__association-item-cell">
        <img src="https://i.stack.imgur.com/n7Ycz.jpg?s=16amp;g=1" title="Success">
        <a href="/alm/levelRequestDetails.action?levelRequestOid=1268">1268</a>amp;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=requestamp;amp;projectStreamOid=2amp;amp;levelOid=4amp;amp;packageOid=" class="c-table-display__action-icon"><img src="https://i.stack.imgur.com/n7Ycz.jpg?s=16amp;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=16amp;g=1" title="Remove">
      </td>
    </tr>
  </tbody>
</table>

Комментарии:

1. вы пробовали переносить данные в этот конкретный столбец внутри display: flex; ?

2. @CodeCreate У вас есть фрагмент кода, который я мог бы проверить?

3. <td style="display: flex"> // Your icons and text goes here </td>

4. @CodeCreate Я пробовал это, и я не могу заставить это работать. Я поручил это нашему веб-дизайнеру, и как только он исправит свои технические проблемы, он займется этим.