Как видно из названия, у меня есть HTML-таблица с несколькими столбцами. В одном из этих столбцов, в котором есть width: auto, я хотел бы отобразить текст, выровненный по левому краю, и изображение / значок, выровненный по правому краю и плавающий, потому что изображение является необязательным (т.е. в некоторых строках его может не быть, и в этом случае я хочу, чтобы текст использовал все доступное пространство в <td>).

Вот пример JSFiddle: https://jsfiddle.net/4d8foL32/2/

В основном код такой:

<tr>
  <td>4000.4</td>
  <td>Lemon soda<img src=""></td><!-- This is the line -->
  <td>10/10/2021</td>
  <td>London, United Kingdom</td>
  <td>Waiting</td>
</tr>
img {
  float: right;
  padding-right: 2px;
}

Есть 2 проблемы, которые я хотел бы решить:

  1. Я бы хотел, чтобы изображение всегда было вертикально по центру строки

    Проблема 1

  2. При уменьшении ширины окна браузера (и, следовательно, ширины таблицы) текст не разделяется на новую строку, сохраняя изображение справа.

    Проблема 2

Изображение должно иметь небольшой отступ слева, чтобы не выходить за пределы текста. Как лучше всего с этим справиться?

1
virtualdj 9 Окт 2021 в 13:24

2 ответа

Лучший ответ

Добавьте класс в соответствующий td (допустим, xyz). И добавьте в класс некоторые свойства гибкости.

<td class="xyz">Lemon soda<img src=""></td>

.xyz { 
    display: flex; 
    align-items: center; 
    justify-content: space-between // or space-around (if you need some space);
}

Примечание. Удалите стиль img из css, иначе это повлияет на решение.

1
sidman2048 9 Окт 2021 в 11:50

В качестве решения вы можете использовать position: absolute и выровнять по вертикали с помощью transform: translateY(). И в table tbody td:nth-child(2) добавьте padding-right, чтобы освободить место для значка.

table tbody td:nth-child(2) {
  text-align: left;
  padding-right: 2em; /* new line */
  position: relative; /* new line */
}

img {
  position: absolute; /* new line */
  right: 0; /* new line */
  top: 50%; /* new line */
  transform: translateY(-50%); /* new line */
  /* float: right; */
  padding-right: 2px;
}
table {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: small;
  text-align: left;
  vertical-align: middle;
  border-collapse: collapse;
  border: 0;
  margin: 0;
  width: 98%;
}

table th,
table td {
  /* Default text alignment */
  text-align: center;
  vertical-align: middle;

  /* Separate border */
  border: 2px solid white;
  border-top: 0;
  border-bottom: 0;
  padding: 2px;
}

/* Header */
table th {
  background: #0093dd;
  color: white;
}

/* Footer */
table tfoot::before {
  content: '';
  display: block;
  height: 8px;
}

table tfoot td:first-child {
  text-align: left;
  padding-left: 16px;
}

table tfoot td:last-child {
  text-align: right;
  padding-right: 16px;
}

/* Alternate line colors */
table tbody tr:nth-child(even) td {
  background: #efefef;
}

/* Description column left aligned */
table tbody td:nth-child(2) {
  text-align: left;
  padding-right: 2em; /* new line */
  position: relative; /* new line */
}

/* Columns width */
table tbody td:nth-child(1),
table tbody td:nth-child(5) {
  width: 90px;
}

table tbody td:nth-child(2) {
  width: auto;
}

table tbody td:nth-child(3) {
  width: 90px;
}

table tbody td:nth-child(4) {
  width: 160px;
}

/* I would like the image to be right aligned inside the <td> and vertically centered */
img {
  position: absolute; /* new line */
  right: 0; /* new line */
  top: 50%; /* new line */
  transform: translateY(-50%); /* new line */
  /* float: right; */
  padding-right: 2px;
}
<table>
      <thead>
        <tr>
          <th>SKU</th>
          <th>Description</th>
          <th>Availability</th>
          <th>Location</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>4000.4</td>
          <td>
            Lemon soda<img
              src="data:image/gif;base64,R0lGODlhEAAQANUAAA5TiDmd6nmDihZ2v057nStqmZSntR1djhyP52Sy7lRod9TX2RZzuhIoOYKftiiHz1es7WB+loqZpjGBvj1znDKZ6TBqlpCqvyxmkpqsulKCpkKi6yiV6GGCm5apt0Gh605/pGaEm4Wit5+wvY6cpz2f6y1plzWb6YOhtz5zmzNrlVis7UWj6zCBv////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEHAC4ALAAAAAAQABAAAAZoQJdwSCwKisIRQcMEWRRIl+GRqJ5YAAxyWk1MSA1OocjtphYSxHhY7pYok83alaF27wm5sI2vfkwuHnZ9VSsMFy4qhF0QDA5CIQGLjY9DERV9EAOVRJd3mpxFngmgUZYVpaZDHQcipkEAOw=="
            />
          </td>
          <td>10/10/2021</td>
          <td>London, United Kingdom</td>
          <td>Waiting</td>
        </tr>
        <tr>
          <td>3000.3</td>
          <td>
            Orange juice<img
              src="data:image/gif;base64,R0lGODlhEAAQANUAAA5TiDmd6nmDihZ2v057nStqmZSntR1djhyP52Sy7lRod9TX2RZzuhIoOYKftiiHz1es7WB+loqZpjGBvj1znDKZ6TBqlpCqvyxmkpqsulKCpkKi6yiV6GGCm5apt0Gh605/pGaEm4Wit5+wvY6cpz2f6y1plzWb6YOhtz5zmzNrlVis7UWj6zCBv////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEHAC4ALAAAAAAQABAAAAZoQJdwSCwKisIRQcMEWRRIl+GRqJ5YAAxyWk1MSA1OocjtphYSxHhY7pYok83alaF27wm5sI2vfkwuHnZ9VSsMFy4qhF0QDA5CIQGLjY9DERV9EAOVRJd3mpxFngmgUZYVpaZDHQcipkEAOw=="
            />
          </td>
          <td>12/11/2021</td>
          <td>Paris, France</td>
          <td>Shipped</td>
        </tr>
        <tr>
          <td>2000.2</td>
          <td>
            An unknown long product to drink when you would like<img
              src="data:image/gif;base64,R0lGODlhEAAQANUAAA5TiDmd6nmDihZ2v057nStqmZSntR1djhyP52Sy7lRod9TX2RZzuhIoOYKftiiHz1es7WB+loqZpjGBvj1znDKZ6TBqlpCqvyxmkpqsulKCpkKi6yiV6GGCm5apt0Gh605/pGaEm4Wit5+wvY6cpz2f6y1plzWb6YOhtz5zmzNrlVis7UWj6zCBv////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEHAC4ALAAAAAAQABAAAAZoQJdwSCwKisIRQcMEWRRIl+GRqJ5YAAxyWk1MSA1OocjtphYSxHhY7pYok83alaF27wm5sI2vfkwuHnZ9VSsMFy4qhF0QDA5CIQGLjY9DERV9EAOVRJd3mpxFngmgUZYVpaZDHQcipkEAOw=="
            />
          </td>
          <td>09/11/2021</td>
          <td>Berlin, Germany</td>
          <td>Waiting</td>
        </tr>
        <tr>
          <td>1000.1</td>
          <td>
            Pineapple juice 500 ml<img
              src="data:image/gif;base64,R0lGODlhEAAQANUAAA5TiDmd6nmDihZ2v057nStqmZSntR1djhyP52Sy7lRod9TX2RZzuhIoOYKftiiHz1es7WB+loqZpjGBvj1znDKZ6TBqlpCqvyxmkpqsulKCpkKi6yiV6GGCm5apt0Gh605/pGaEm4Wit5+wvY6cpz2f6y1plzWb6YOhtz5zmzNrlVis7UWj6zCBv////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEHAC4ALAAAAAAQABAAAAZoQJdwSCwKisIRQcMEWRRIl+GRqJ5YAAxyWk1MSA1OocjtphYSxHhY7pYok83alaF27wm5sI2vfkwuHnZ9VSsMFy4qhF0QDA5CIQGLjY9DERV9EAOVRJd3mpxFngmgUZYVpaZDHQcipkEAOw=="
            />
          </td>
          <td>24/12/2021</td>
          <td>&mdash;</td>
          <td>&mdash;</td>
        </tr>
        <tr>
          <td>1001.5</td>
          <td>
            This product doesn't have any icon and should use all the space
          </td>
          <td>03/12/2021</td>
          <td>&mdash;</td>
          <td>Waiting</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td><a href="">&lt; Prev</a></td>
          <td colspan="3">Products 1-5 of 2124</td>
          <td><a href="">Next &gt;</a></td>
        </tr>
      </tfoot>
    </table>
1
ЖнецЪ 9 Окт 2021 в 12:08