Position elements within a cell (td) of an HTML table

Question

Position elements within a cell (td) of an HTML table

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

0

Currently I have a column of a data table, where a number is shown on the right side and an icon on the left side of the same cell.

However, I would like to show it in the opposite direction (number on the left, icon on the right) as shown in the image.

Next I show a fragment of the code:

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
</head>
<body>
<table>
<tr>
    <td>
    <div style="float: left;">
      42
    </div>      
    <div style="float: right;">
      <i aria-hidden="true" class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">
        error_outline
      </i>
    </div>
  </td>
 </tr>
  <tr>
    <td>
      <div style="float: left;">
        -326
      </div>      
    <div style="float: right;">
      <i aria-hidden="true" class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">
        error_outline
      </i>
    </div>
  </td>
 </tr>
  <tr>
    <td>
      <div style="float: left;">
       127
      </div>      
  </td>
 </tr>

</table>
</body>
</html>

The idea is not to create another additional column to locate the icon, but within the same cell position the icon and number to give the feeling that they were divided by a line and the number aligned to the right.

I tried changing the order and the float and this is shown:

But the 42 does not show up as I hope because I want all the numbers to be aligned to the right.

I appreciate your cooperation.

html css

asked by Javier Cárdenas 07.11.2018 в 16:49

source

3 answers

2

If I understood correctly, what you are looking for is only to change the order of the icon and the number in each cell ..
In this case it will only be necessary to toggle your order in the HTML:

<td>
  <div style="float: left;">
    42
  </div>
  <div style="float: right;">
    <i class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">
      error_outline
    </i>
  </div>
</td>

Edit:

Now I understand your question .. There are several ways to do this, but it occurs to me:

<table>
  <tr>
    <td style="text-align: right;">
      <span style="margin-right: 10px; text-align:right;">
        42
      </span>
      <span>
        <i class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">
          error_outline
        </i>
      </span>
    </td>
  </tr>
  
<tr>
    <td style="text-align: right;">
      <span style="margin-right: 10px;">
        -326
      </span>
      <span>
        <i class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">
          error_outline
        </i>
      </span>
    </td>
  </tr>
</table>

Notice that I made several changes to achieve the style I understood you needed, in addition to adding <table> and <tr> .

answered by 07.11.2018 в 16:58

1

One thing you can do is give a width to div that has the numbers and align the content on the right with text-align . You can adjust the values to your liking, I have given it 70% of width for the numbers and to make sure that the div of the icon occupies the rest of the space I have also given it a width of 30%:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <table>
    <tr>
      <td>
        <div style="float: left; width:70%; text-align:right;">
          42
        </div>
        <div style="float: right; width:30%">
          <i aria-hidden="true" class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">
        error_outline
      </i>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="float: left; width:70%; text-align:right;">
          -326
        </div>
        <div style="float: right;width:30%;">
          <i aria-hidden="true" class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">
        error_outline
      </i>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="float: left; width:70%; text-align:right;">
          -326
        </div>
      </td>
    </tr>
  </table>
</body>

</html>

On the other hand, it would be better if you would extract the styles to a separate .css file instead of putting them all in the html.

answered by 07.11.2018 в 21:31

How to close a modal? Return a class with two properties from one method

score 1 · Accepted Answer

Try replacing the Float the Display DIV and TD align to the right of the following way:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <table border="1">
        <tr>
            <td style="text-align: right;">
                <div style="display: inline-block;">
                    42
                </div>      
                <div style="display: inline-block;">
                    <i aria-hidden="true" class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">
                        error_outline
                    </i>
                </div>
            </td>
        </tr>
        <tr>
            <td style="text-align: right;">
                <div style="display: inline-block;">
                    -326
                </div>      
                <div style="display: inline-block;">
                    <i aria-hidden="true" class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">
                        error_outline
                    </i>
                </div>
            </td>
        </tr>
        <tr>
            <td style="text-align: right;">
               <div style="display: inline-block;">
                  127
               </div>      
               <div style="display: inline-block; width:16px;">
               </div>
            </td>
         </tr> 
    </table>
</body>
</html>