align columns of a HTML select

0

I'm doing a web form,

I try to emulate a listbox, with the html select, the data pulls, but the problem is to show the content of the data obtained, after going through html, css, php, json, js, sql server and other herbs , I get the code to show, in the SELECT:

'<option value="' + filas.dni + '"   >' + filas.dni + '&nbsp&#124;&nbsp&nbsp' + filas.apellidos_nombres + ' &nbsp&nbsp&nbsp&#124; ' + filas.cargo + ' &nbsp&nbsp&nbsp&#124; ' + filas.sueldo +   ' &nbsp&nbsp&nbsp&#124; ' + filas.costo_hora +    '</option>');

but it happens that I show the data in non-aligned columns .. example:

12345678 - JUAN PEREZ - MEDICO
87654321 - MARIENELLA DEL AGUILA - ENFERMERA
96325874 - PERICO PEREZ - LIMPIEZA

There is some way to order it to appear as:

12345678 - JUAN PEREZ                       - MEDICO
87654321 - MARIENELLA DEL AGUILA - ENFERMERA
96325874 - PERICO PEREZ                    - LIMPIEZA

I have tried in several ways: - using jquery datatable, for other excellent uses, but, for my purposes the select - from the SQL server, with queries assigned spaces to the column, surnames_names + charge; it also goes out of alignment ...

I appreciate your help on how to align those columns in the select ...

thank you ..

    
asked by Jose Obeso 25.09.2018 в 18:57
source

1 answer

0

You have a property of css called justify-content that would solve the problem.

It would be something like this:

option {
    display: flex;
    justify-content: center;
}

How I do not see much code I suppose this will be worth it, even if you have something else that you can block it.

    
answered by 26.09.2018 в 10:18