简体   繁体   中英

Align text on the left, image floating on the right and vertically centered inside a <td>

As the title says, I have an HTML table with some columns. In one of these columns, which has width: auto I would like to display the text left aligned and and an image/icon right aligned and floating, because the image is optional (ie some rows may not have it and I want the text to use all the available space in the <td> in that case).

Here's the JSFiddle example: https://jsfiddle.net/4d8foL32/2/

Basically the code is this:

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

There are 2 issues I would like to solve:

  1. I would like the image always to be vertically centered on the row

    问题1

  2. When reducing the browser window width (and hence the table width), the text doesn't split on a new line keeping the image on the right.

    问题2

The image should keep a small padding on the left to not go over the text. Which is the best way to handle this?

Add class to respective td (let assume xyz). And add some flex properties to the class.

<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);
}

Note: Remove img style from css or else it will affect the solution.

As a solution, you can use position: absolute and align by vertically with transform: translateY() . And in table tbody td:nth-child(2) add padding-right to create extra space for the icon.

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM