javascript - 有没有办法调整这些值？

Question

我有一个数据表，其中有一列包含整数类型的值，但是当我在视图中显示这些值时，数字并没有很好地对齐，所以我在一行中有一个值 = 600，在另一行 = 1200，而 600 中的 6 是与千位 (1) 对齐，而不是与百位对齐。

这是我对数据表的看法：

<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" class="btn btn-sm btn-success"
                                            href="/products/download/{{ $product->file }}"><i
                                                class="fa fa-download"></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>

所以我试着这样做：

    div tbody tr{
  text-align: center;
 } 

这使我的表中不同行的数字对齐，但我的标题未对齐。我的价值观太偏右了。

Answer 1

默认情况下，文本在表格中左对齐，这就是您在上面看到的内容。如果您希望数字正确对齐，您需要添加text-align:right;到td包含数字的元素。

看起来您可能正在使用 BootStrap，在这种情况下，他们已经有一个您可以使用的类，该类text-right将设置text-align为right.

如果您不使用 BootStrap，您可以像这样自己添加类：

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

然后根据需要将该类添加到td元素中。

Answer 2

我的样式表：

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

我的观点：

<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" class="btn btn-sm btn-success"
                    href="/products/download/{{ $product->file }}"><i
                        class="fa fa-download"></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>