How to align icons in the cells

Navigation
0

Hello, I'm using the fontawesome library to show some icons in some cells 

  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

I try to put it in the upper part of the cell, and with valign=”top” or vertical-align: top I get it.

When we are viewing the table on a horizontal screen, it looks good because each line of the table is shown on a single line.

On the other hand, when the screen is left vertical, the lines are shown double and the cell that contains the icon remains in the center, or even something lower.

So I show the icon 

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes, width=device-width" />
	<title>Titulo</title>

	    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
	
  
      <style type="text/css">
        .oculto1,.oculto2,.oculto3{
            margin-left: 1%;
            display: none;
        }
        .info2_submenu1 span{
            padding-left: 15px;
        }
         td {
          vertical-align: "top";
        }

    </style>


</head>
<body>

<div>
    <p>
    <p>
    <div>
        <a><button type="button" style='width:257px; text-align: left; font: 11pt arial;' onclick="window.open('pagina.htm','_self');">
           <span><i style="font: 10pt comic sans ms; color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>&nbsp; Boton 1</span></button></a>
    </div>
          
    <div class="info1">
        <a href="#info1"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 1</button></a>
    </div>
        <div id="<info1></info1>" class="oculto1">
        <table>
            <tr>
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;INDICE por artículos</a></td>
        	</tr>
            <tr>
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;Cap. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
            </tr> 
            <tr>
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td><a href="pagina.htm">&nbsp;Cap. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
            </tr>
        </table>
        </div>
         

    <div class="info2">
        <a href="#info2"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 2</button></a>
    </div>
        <div id="info2" class="oculto2">
        <table>
            <tr>
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;INDICE</a></td>
            </tr>
            <tr>
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
            </tr>
            <tr>
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. </a></td>
            </tr>

            <tr>
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-file" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="#" class="info2_ET1">&nbsp;Tema 1 - Jujubes marzipan chocolate cake wafer biscuit.</a></td>
            </tr>
			<tr hidden class="info2_submenu1">
			<td></td>
			    <td>
			    <span style='font: 11pt arial'><a href="pagina.htm"><i style="color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>&nbsp;Cap. 1/Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit.</a></span><br>
			    <span style='font: 11pt arial'><a href="pagina.htm"><i style="color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>&nbsp;Cap. 1/Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></span>
			    </td>
			</tr>
        </table>
        </div>
          

    <div class="info3">
        <a href="#info3"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 3</button></a>
    </div>
        <div id="info3" class="oculto3">
        <table>
            <tr>
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;INDICE</a></td>
            </tr>
            <tr>
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
            </tr>
            <tr>
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. </a></td>
            </tr>
            </tr>
        </table>
        </div>

    <div>
        <a><button type="button" style='width:257px; text-align: left; font: 11pt arial;' onclick="window.open('pagina.htm','_self');">
           <span><i style="font: 10pt comic sans ms; color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>&nbsp; INDICE</span></button></a>
    </div>
    
</div>

<script type="text/javascript">
    jQuery(document).ready(function(){
            $('.info1').on('click',function(){
                $('.oculto1').slideToggle('fast');
                $('.oculto2').slideUp('fast');
                $('.oculto3').slideUp('fast');
                $('.info2_submenu1').slideUp('fast');

            });
            $('.info2').on('click',function(){
                $('.oculto2').slideToggle('fast');
                $('.oculto1').slideUp('fast');
                $('.oculto3').slideUp('fast');
                $('.info2_submenu1').slideUp('fast');

            });
            $('.info3').on('click',function(){
                $('.oculto3').slideToggle('fast');
                $('.oculto2').slideUp('fast');
                $('.oculto1').slideUp('fast');
                $('.info2_submenu1').slideUp('fast');
            });
            $('.info2_ET1').on('click',function(){
                $('.info2_submenu1').slideToggle('fast');
            });
        }); 
</script>


</body>
</html>

I have even tried to align all the content of the <tabla> and I have not succeeded.

As you can put the icon on the top of the cell so that when the content is displayed on more than one line, it looks good.

    
asked by SoCu 14.03.2018 в 19:42
source

3 answers

1

It should work with a simple vertical-align: top; 

td {
  vertical-align: top;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

<table>
    <tr>
        <td><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
        <td>Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. Chocolate bar macaroon candy sugar plum chocolate bar caramels sweet dessert. Danish tiramisu bonbon dessert sugar plum tart fruitcake gummies. Jelly beans chupa chups gingerbread croissant. Candy canes tiramisu candy dragée icing biscuit cotton candy. Cupcake cookie bonbon cookie. Chocolate caramels oat cake sweet roll gummies powder brownie ice cream brownie. Jujubes toffee candy canes sweet roll danish jelly gummies lemon drops. Pie candy canes brownie. Gingerbread macaroon cookie gummies cheesecake. Candy canes wafer sesame snaps. Candy sweet marshmallow topping brownie topping dragée gummi bears chocolate bar. Icing chupa chups chupa chups apple pie wafer cookie jelly gummi bears sweet.</td>
    </tr>
    <tr>
        <td><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
        <td>Lorem ipsum...</td>
    </tr>
</table>

If you would like to use only one cell for both, you can easily fix it with flexbox: 

td {
  display: flex;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

<table>
    <tr>
        <td><i class="fa fa-angle-double-right" aria-hidden="true"></i><span>Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. Chocolate bar macaroon candy sugar plum chocolate bar caramels sweet dessert. Danish tiramisu bonbon dessert sugar plum tart fruitcake gummies. Jelly beans chupa chups gingerbread croissant. Candy canes tiramisu candy dragée icing biscuit cotton candy. Cupcake cookie bonbon cookie. Chocolate caramels oat cake sweet roll gummies powder brownie ice cream brownie.</span></td>
    </tr>
    <tr>
        <td><i class="fa fa-angle-double-right" aria-hidden="true"></i><span>Lorem ipsum...</span></td>
    </tr>
</table>

The rest would be the details of the spaces you need between the icon and the text.

EDITION:

You should not include quotes when you define the preset values for CSS properties, the correct thing in this case is: vertical-align: top;

Neither should you include consecutive spaces in HTML as &nbsp;&nbsp;&nbsp; , that's a very bad practice, for that CSS exists.

Finally, when you apply the same style to several elements, (the blue color for example), the correct thing is to add a class to each of these elements and define the style only once in the CSS (see .blue- text).

Ideally the CSS code should not be "inline", but should be isolated from the HTML, in its entirety. 

    jQuery(document).ready(function(){
            $('.info1').on('click',function(){
                $('.oculto1').slideToggle('fast');
                $('.oculto2').slideUp('fast');
                $('.oculto3').slideUp('fast');
                $('.info2_submenu1').slideUp('fast');

            });
            $('.info2').on('click',function(){
                $('.oculto2').slideToggle('fast');
                $('.oculto1').slideUp('fast');
                $('.oculto3').slideUp('fast');
                $('.info2_submenu1').slideUp('fast');

            });
            $('.info3').on('click',function(){
                $('.oculto3').slideToggle('fast');
                $('.oculto2').slideUp('fast');
                $('.oculto1').slideUp('fast');
                $('.info2_submenu1').slideUp('fast');
            });
            $('.info2_ET1').on('click',function(){
                $('.info2_submenu1').slideToggle('fast');
            });
        }); 
        .oculto1,.oculto2,.oculto3{
            margin-left: 1%;
            display: none;
        }
        .info2_submenu1 span{
            padding-left: 15px;
        }
        .blue-text {
          font: 10pt comic sans ms; 
          color: blue;
        }
        td {
          vertical-align: top;
        }
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div>
    <p>
    <p>
    <div>
        <a><button type="button" style='width:257px; text-align: left; font: 11pt arial;' onclick="window.open('pagina.htm','_self');">
           <span><i class="fa fa-angle-double-right blue-text" aria-hidden="true"></i> Boton 1</span></button></a>
    </div>
          
    <div class="info1">
        <a href="#info1"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 1</button></a>
    </div>
        <div id="<info1></info1>" class="oculto1">
        <table>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">INDICE por artículos</a></td>
        	</tr>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">Cap. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
            </tr> 
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td><a href="pagina.htm">Cap. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
            </tr>
        </table>
        </div>
         

    <div class="info2">
        <a href="#info2"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 2</button></a>
    </div>
        <div id="info2" class="oculto2">
        <table>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">INDICE</a></td>
            </tr>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
            </tr>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. </a></td>
            </tr>

            <tr>
            <td><span class="blue-text"><i class="fa fa-file" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="#" class="info2_ET1">Tema 1 - Jujubes marzipan chocolate cake wafer biscuit.</a></td>
            </tr>
			<tr hidden class="info2_submenu1">
			<td></td>
			    <td>
			    <span style='font: 11pt arial'><a href="pagina.htm"><i style="color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>Cap. 1/Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit.</a></span><br>
			    <span style='font: 11pt arial'><a href="pagina.htm"><i style="color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>Cap. 1/Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></span>
			    </td>
			</tr>
        </table>
        </div>
          

    <div class="info3">
        <a href="#info3"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 3</button></a>
    </div>
        <div id="info3" class="oculto3">
        <table>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">INDICE</a></td>
            </tr>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
            </tr>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. </a></td>
            </tr>
        </table>
        </div>

    <div>
        <a><button type="button" style='width:257px; text-align: left; font: 11pt arial;' onclick="window.open('pagina.htm','_self');">
           <span><i class="fa fa-angle-double-right blue-text" aria-hidden="true"></i> INDICE</span></button></a>
    </div>
    
</div>
    
answered by 14.03.2018 / 20:04
source
1

estimated, to add an icon next to the text is done more or less like that and it is with bootstraps. 

<table>
<tr>
    <td>
        <div class="row">   
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3  ">
                    <i class="fa fa-user"></i>
            </div>
            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9  ">
                <span>Mi perfil</span>
            </div>  
        </div>
    </td>
</tr></table>

I hope it helps you.

    
answered by 14.03.2018 в 19:53
1

td 
{
    height: 50px; 
    width:50px;
}

#cssTable td 
{
    text-align:center; 
    vertical-align:middle;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

<table border="1">
    <tr>
        <td align="center" valign="middle" style="font: 10pt comic sans ms; color: blue"><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>
        <td align="center" valign="middle">Text</td>
    </tr>
</table>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

I hope you find it useful, greetings.

    
answered by 14.03.2018 в 19:56
SQL injection in PHP with a CodeIgniter midleware parseInt from string to number in javascript