rogi's avatar
Level 1

Why is first column in table wider than others column?

Hi,

I have a problem with the width in the table ... Why is the first column in this table larger than any other.. he should be the smallest in the table and there is almost the widest?

Thanks!

show.blade.php

        <div class="rTable" >
                    <h3 ><i>NARUČUJEMO:</i></h3>
    
    
                <div class="rTableRow" >
    
                    <div class="rTableHead" style="text-align:center;background-color:#FFFF99;">Red.</br>br.
                    </div>
    
                    <div class="rTableHead"style="text-align:center;vertical-align:middle">TRGOVAČKI NAZIV DOBRA - USLUGE
                    </div>
    
                    <div class="rTableHead"style="text-align:center;;background-color:#FFFF99   ">Jed.</br>mjere
                    </div>
    
                    <div class="rTableHead"style="text-align:center;vertical-align:middle">Količina
                    </div>
    
                    <div class="rTableHead"style="text-align:center;;background-color:#FFFF99   ">CIJENA</br>(bez PDV-a)
                    </div>
    
                    {{--<div class="rTableHead"style="text-align:left;width:20%;text-align:center;">IZNOS</br>(5 X 4)
                    </div>--}}
                     <div class="rTableHead"style="text-align:center;">PDV</br>
                    </div>
    
                    <div class="rTableHead"style="text-align:center;">UKUPNO</br>
                    </div>
    
                    @if($order->user_id ==  Auth::user()->id)
                    <div class="rTableHead"   id="printPageButton"   style="text-align:center;">Uredi</br>
                    </div>
    
                    <div class="rTableHead"    id="printPageButton"   style="text-align:center;">Izbriši</br>
                    </div>
                    @endif
                </div>
    
                <div class="rTableRow">
    
                    <div class="rTableCell" style="text-align:center;vertical-align:middle;font-size:10px;background-color:#FFFF99  ;">1
                    </div>
    
                    <div class="rTableCell" style="text-align:center;vertical-align:middle;font-size:10px">2
                    </div>
    
                    <div class="rTableCell" style="text-align:center;vertical-align:middle;font-size:10px;background-color:#FFFF99  ">3
                    </div>
    
                    <div class="rTableCell" style="text-align:center;vertical-align:middle;font-size:10px">4
                        </div>
    
                    <div class="rTableCell" style="text-align:center;vertical-align:middle;font-size:10px;background-color:#FFFF99  ">5
                    </div>
    
                    <div class="rTableCell" style="text-align:center;vertical-align:middle;font-size:10px">6
                    </div>
    
                    <div class="rTableCell" style="text-align:center;vertical-align:middle;font-size:10px">7
                    </div>
    
                    @if($order->user_id == Auth::user()->id)
    
                    <div class="rTableCell" id="printPageButton"  style="text-align:center;vertical-align:middle;font-size:10px">8
                    </div>
                    <div class="rTableCell" id="printPageButton" style="text-align:center;vertical-align:middle;font-size:10px">9
                    </div>
                    @endif
                </div>
                @foreach($items as $item)
    
                <div class="rTableRow" >
    
                    <div class="rTableCell" style="background-color:#FFFF99">{{$item->rb}}</div>
    
                    <div class="rTableCell">{{$item->naziv_dobra}}
                    </div>
    
                    <div class="rTableCell" style="background-color:#FFFF99">{{$item->jed_mjere}}
                    </div>
    
                    <div class="rTableCell">{{$item->kolicina}}
                    </div>
    
                    <div class="rTableCell" style="background-color:#FFFF99">{{$item->cijena_bez_pdv}} kn
                    </div>
    
                    {{--<div class="rTableCell" >{{$item->iznos5x4}} kuna
                    </div>--}}
    
                    <div class="rTableCell">{{$item->pdv}}%
                    </div>
    
                    <div class="rTableCell">{{$item->ukupno}} kn
                    </div>
                    
                <!--buttons for edit and delete -->
                @if($item->user_id == Auth::user()->id or $item->id == 1)
    
                    <div id ="printPageButton" class="rTableCell">
                        <a href="{{url('goods')}}/{{$item->id}}/edit" class ="btn btn-primary" id ="printPageButton" style="height:35px">Uredi</a>
                    </div>
    
                    <div id ="printPageButton" class="rTableCell" >
                            {{Form::open(['action'=>['ItemsController@destroy',$item->id],'method'=>'POST']) }}
                            {{Form::hidden('_method','DELETE')}}
                            {{Form::submit('Izbriši',['class'=>'btn btn-danger','id' => 'printPageButton','name'=>'delitem','onclick'=>'return confirm("Da li ste sigurni?")'])}}
                            {{Form::close()}}
                    </div>
                @endif
    
    
    </div>
          @endforeach

css:

    .rTable {
        display: table;
        width: 90%;
        margin-left:6%;
    }
    .rTableRow {
        display: table-row;
    }
    .rTableHeading {
        display: table-header-group;
        background-color: #ddd;
    }
    .rTableCell, .rTableHead {
        display: table-cell;
        padding: 3px 10px;
        border: 1px solid #999999;
    }
    
    .rTableHeading {
        display: table-header-group;
        background-color: #ddd;
        font-weight: bold;
    }
    .rTableFoot {
        display: table-footer-group;
        font-weight: bold;
        background-color: #ddd;
    }
    .rTableBody {
        display: table-row-group;
    }

thanks

0 likes
3 replies
s4muel's avatar

show the screenshot, or better yet a generated html (not the blade)

rogi's avatar
Level 1

ok i I got it ... I put table layout on fixed and in every cell I change width as i needed ...


 <div style="table-layout: fixed; width:90%;  margin-left:6%;">
                <h3 ><i>NARUČUJEMO:</i></h3>


            <div class="rTableRow" >

                <div class="rTableHead" style="text-align:center;background-color:#FFFF99;width:5%">Red.</br>br.
                </div>

                <div class="rTableHead"style="text-align:center;vertical-align:middle;width:20%">TRGOVAČKI NAZIV DOBRA - USLUGE
                </div>

                <div class="rTableHead"style="text-align:center;;background-color:#FFFF99   ">Jed.</br>mjere
                </div>

                <div class="rTableHead"style="text-align:center;vertical-align:middle">Količina
                </div>

                <div class="rTableHead"style="text-align:center;;background-color:#FFFF99   ">CIJENA</br>(bez PDV-a)
                </div>

                {{--<div class="rTableHead"style="text-align:left;width:20%;text-align:center;">IZNOS</br>(5 X 4)
                </div>--}}
                 <div class="rTableHead"style="text-align:center;">PDV</br>
                </div>

                <div class="rTableHead"style="text-align:center;">UKUPNO</br>
                </div>

                @if($order->user_id ==  Auth::user()->id)
                <div class="rTableHead"   id="printPageButton"   style="text-align:center;">Uredi</br>
                </div>

                <div class="rTableHead"    id="printPageButton"   style="text-align:center;">Izbriši</br>
                </div>
                @endif
            </div>

regards..

s4muel's avatar

and first make sure your html is valid, couple of hints:

class="rTableHead"style=" <<= you miss a space before style attribute

</br> is just an invalid closing tag, use <br /> instead

make id attributes unique id ="printPageButton" is there several times

there is no closing tag for <div class="rTable" > as far as i noticed correctly

Please or to participate in this conversation.