Is there any way to align these values?-CodePudding

I have a datatable with a column that contains values of type integer, but when i show those values on my view numbers arent aligned well, so i have a value in a row = 600 and in another row = 1200 and the 6 of 600 is aligned with the thousand digit (1) instead with the hundreeds.

And this is my view with my data table:

<table id="example1" class="table table-striped table-responsive" width="100%">
                        <thead class="thead">

                            

                            <tr>
                                <th style="display: none">Codigo</th>
                                <th>ID</th>
                                <th>Producto</th>
                                <th>Tipo de Producto</th>
                                <th>Marca</th>
                                <th>Modelo</th>
                                <th>Moneda de Compra</th>                                                                       
                                <th class="quitarDecimales">Costo Total</th>
                                <th>Moneda de Venta</th>
                                <th class="quitarDecimales">Precio de Lista</th>
                                <th>Margen Bruto</th>
                                
                                <th style="width: 12%">Accion</th>
                            </tr>
                        </thead>
                        <tbody>
                           
                            @foreach($file as $key => $product)
                            @if($product->status == 1)
                                <tr>
                                    <td style="display: none">{{ $key 1 }}</td>
                                    <td>{{ $product->id }}</td>
                                    <td>{{$product->marca->brandName . " " . $product->modelo->modelName}}</td>
                                    <td>{{ $product['ptype']['productType']}}</td>
                                    <td>{{ $product->marca->brandName }}</td>
                                    <td>{{ $product->modelo->modelName}}</td>
                                    <td>{{ $product->coin }}</td>                                    
                                    <td>{{ $product->costUSD }}</td>
                                    <td>{{$product->sale_coin}}</td>
                                    <td>{{$product->list_priceUSD}}</td>
                                    <td>{{$product->marginUSD}}</td>
                                    
                                    @php
                                    $count_product = App\Model\Purchase::where('product_id',$product->id)->count();
                                    @endphp
                                        <td>


                                        <!--<a title="Download" id="download" 
                                            href="/products/download/{{ $product->file }}"><i
                                                ></i></a>-->
                                        <a title="Edit" class="btn btn-sm text-white"
                                            style="background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);"
                                            href="{{ route('products.edit', $product->id) }}"><i
                                                class="fa fa-edit"></i></a>
                                        <a title="Delete" id="delete" class="btn btn-sm btn-danger"
                                            href="{{ route('products.delete', $product->id) }}"><i
                                                class="fa fa-trash"></i></a>
                                        <a title="Info" id="info" class="btn btn-sm btn-info" href="{{route('products.detail', $product->id)}}" ><i class="fa fa-eye" ></i></a>
                                        
                                    </td>
                                </tr>
                            @endif

                                
                            @endforeach
                        </tbody>
                        
                    </table>

So i tried doing this:

    div tbody tr{
  text-align: center;
 }

Which aligns my number digits of the different rows in my table but my thead titles are not aligned. My values go too far to the right.

CodePudding user response：

By default text is aligned to the left in tables which is what you are seeing above. If you want the numbers to be aligned correctly you need to add text-align:right; to the td elements which contain numbers.

It looks like you might be using BootStrap, in which case they already have a class you can use called text-right which will set the text-align to right.

If you are not using BootStrap you can add the class yourself like this:

<style>
    .text-right{
        text-align: right;
    }
</style>

then add the class to the td elements as needed.

CodePudding user response：

My stylesheet:

div tbody tr .numero{
    text-align: right;
    padding-right: 50px;
}
    
div tbody tr{
    text-align: center;
}
    
div thead tr{
     text-align: center;
}

My view:

<table id="example1" class="table table-striped table-responsive" width="100%">
    <thead class="thead">
        <tr>
            <th style="display: none">Codigo</th>
            <th>ID</th>
            <th>Producto</th>
            <th>Tipo de Producto</th>
            <th>Marca</th>
            <th>Modelo</th>
            <th>Moneda de Compra</th>
            <th class="quitarDecimales">Costo Total</th>
            <th>Moneda de Venta</th>
            <th class="quitarDecimales">Precio de Lista</th>
            <th>Margen Bruto</th>
            <th style="width: 12%">Accion</th>
        </tr>
    </thead>
    <tbody>
        @foreach($file as $key => $product)
        @if($product->status == 1)
        <tr>
            <td style="display: none">{{ $key 1 }}</td>
            <td>{{ $product->id }}</td>
            <td>{{$product->marca->brandName . " " . $product->modelo->modelName}}</td>
            <td>{{ $product['ptype']['productType']}}</td>
            <td>{{ $product->marca->brandName }}</td>
            <td>{{ $product->modelo->modelName}}</td>
            <td >{{ $product->coin }}</td>
            <td class="numero">{{ $product->costUSD }}</td>
            <td>{{$product->sale_coin}}</td>
            <td class="numero">{{$product->list_priceUSD}}</td>
            <td class="numero">{{$product->marginUSD}}</td>
            @php
            $count_product = App\Model\Purchase::where('product_id',$product->id)->count();
            @endphp
            <td>
                <!--<a title="Download" id="download" 
                    href="/products/download/{{ $product->file }}"><i
                        ></i></a>-->
                <a title="Edit" class="btn btn-sm text-white"
                    style="background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);"
                    href="{{ route('products.edit', $product->id) }}"><i
                    class="fa fa-edit"></i></a>
                <a title="Delete" id="delete" class="btn btn-sm btn-danger"
                    href="{{ route('products.delete', $product->id) }}"><i
                    class="fa fa-trash"></i></a>
                <a title="Info" id="info" class="btn btn-sm btn-info" href="{{route('products.detail', $product->id)}}" ><i class="fa fa-eye" ></i></a>
            </td>
        </tr>
        @endif
        @endforeach
    </tbody>
</table>