Можно ли использовать CSS переход ширины столбца в зависимости от содержимого ячейки таблицы? - PullRequest
Новая
       11

Можно ли использовать CSS переход ширины столбца в зависимости от содержимого ячейки таблицы?

1 голос
/ 08 апреля 2020

Моя цель - иметь таблицу с заголовками, которые плавно расширяются (используя CSS transition) до полной ширины текста содержимого ячейки при наведении курсора на ячейку заголовка. Мой текущий подход заключается в том, чтобы иметь фиксированную ch ширину контейнера текста в ячейке заголовка и позволить этому контейнеру расширяться до 100% или фиксированной ширины px при наведении на него курсора.

Фактическая причина для этого состоит в том, что таблица, с которой я работаю, имеет очень ограниченную доступную ширину, и это будет способом уменьшения общей ширины без удаления столбцов. Такой способ отображения полного текста был бы более изящным способом отображения полного текста в заголовке, чем всплывающая подсказка при наведении на нее курсора.

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

Я видел другие примеры (например, это и это ), где люди анимируют ширину, но никто, кажется, не оживляет ширину с набором динамической c ширины по содержанию заголовочной ячейки. Это возможно без js?

Рабочий пример: 

* {
  box-sizing: border-box;
  transition: width 250ms ease-out;
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th:hover .th-title {
  width: 100% !important;
}

th,
td {
  width: 100%;
}

.th-title {
  overflow: hidden;
}

#th-domain {
  width: 3ch;
}

#th-name {
  width: 4ch;
}

#th-key {
  width: 3ch;
}

#th-protocol {
  width: 4ch;
}

#th-ip {
  width: 7ch;
}

/* Styling code */
th,
td {
  font-family: Monaco, monospace;
  padding: 4px 8px;
}

th {
  color: #fff;
  background-color: #1d7490;
  height: 32px;
}

tbody>tr {
  border-bottom: 1px solid #bfbfbf;
}
<table>
  <thead>
    <tr>
      <th>
        <div id="th-domain" class="th-title">DomainDomain</div>
      </th>
      <th>
        <div id="th-name" class="th-title">NameName</div>
      </th>
      <th>
        <div id="th-key" class="th-title">KeyKey</div>
      </th>
      <th>
        <div id="th-protocol" class="th-title">ProtocolProtocol</div>
      </th>
      <th>
        <div id="th-ip" class="th-title">Last IPLast IP</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><label>Domain1</label></td>
      <td><label>Name1</label></td>
      <td><label>Key1</label></td>
      <td><label>Protocol1</label></td>
      <td><label>IP1</label></td>
    </tr>
    <tr>
      <td><label>Domain2</label></td>
      <td><label>Name2</label></td>
      <td><label>Key2</label></td>
      <td><label>Protocol2</label></td>
      <td><label>IP2</label></td>
    </tr>
    <tr>
      <td><label>Domain3</label></td>
      <td><label>Name3</label></td>
      <td><label>Key3</label></td>
      <td><label>Protocol3</label></td>
      <td><label>IP3</label></td>
    </tr>
    <tr>
      <td><label>Domain4</label></td>
      <td><label>Name4</label></td>
      <td><label>Key4</label></td>
      <td><label>Protocol4</label></td>
      <td><label>IP4</label></td>
    </tr>
  </tbody>
</table>

Редактировать: отрегулированная ширина стола

...