Is there any way to force the line break inside the table tag?

Navigation
0

I have a select in bank that returns me a quantity of records, in the case fiscal notes, each note of these has N items, and I would like to make a subtable that when it is clicked, list correctly. Today, it is this way (for 1 item works correctly, for more than that, it does not move the second record):

However,whenthereismorethanoneitemforagivennote,itlookslikethis:

HowIwouldlikeyoutostay:

TheHTMListhisway(I'musingtheMVCstandard,ietheHTMLismyView,andfortheModelandControllerI'musingC#):

<divclass="panel-body">
        <table id="example" class="table table-responsive table-hover table-striped" style="width:100%">
            <thead>
                <tr>
                    <th class="active">Nota</th>
                    <th class="active">Serie</th>
                    <th class="active">Filial</th>
                    <th class="active">Autorizado</th>
                    <th class="active">Valor</th>
                    <th class="active">Xml</th>
                    <th class="active">Danfe</th>
                    <th class="active">Itens</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var obj in Model.notasLista)
                {
                    <tr class="clickable" data-toggle="collapse" id="@obj.id" data-target="[email protected]">
                        <td>@obj.nf</td>
                        <td>@obj.serie</td>
                        <td>003</td>
                        <td>@obj.autorizado</td>
                        <td>R$ @obj.valor</td>
                        <td><span class="glyphicon glyphicon-download-alt"></span></td>
                        <td><span class="glyphicon glyphicon-download-alt"></span></td>
                        <td><span class="glyphicon glyphicon-plus-sign"></span></td>
                    </tr>
                    <tr class="collapse @obj.id">
                        <td class="info" style="width:10%"></td>
                        <td class="info">Item</td>
                        <td class="info">Material</td>
                        <td class="info">Preço</td>
                        <td class="info">Qtde</td>
                        <td class="info">Desc\Acresc</td>
                        <td class="info">Total</td>
                    </tr>
                    <tr class="collapse  @obj.id">
                        <td style="width:10%"></td>
                        @foreach (var tes in Model.itensLista)
                        {
                            if (@obj.id.Equals(tes.idItens))
                            {

                                <td>@tes.item</td>
                                <td>@tes.descricaoMaterial</td>
                                <td>R$ @tes.precoItem</td>
                                <td>@tes.quantidade</td>
                                <td>R$ @tes.vlrDescontoAcres</td>
                                <td>R$ @tes.vlrTotal</td>

                            }

                        }
                    </tr>
                }
            </tbody>
        </table>
    </div>

Is there any way to force this line break? Like for example, after traversing the 1st row in the foreach and so on ...

    
asked by anonymous 21.05.2018 / 19:13

1 answer

0

Thanks to Leandro in the above comment, I used the <colspan> attribute and made some modifications, which looked like this:

Inside the foreach for items: 

foreach (var tes in Model.itensLista)
{

    if(@obj.id.Equals(tes.idItens))
    {
     <tr class="collapse  @obj.id" white-space ="pre">
     <td style="width:10%"></td>
        <td>@tes.item</td>
        <td>@tes.descricaoMaterial</td>
        <td>R$ @tes.precoItem</td>
        <td>@tes.quantidade</td>
        <td>R$ @tes.vlrDescontoAcres</td>
        <td>R$ @tes.vlrTotal</td>
    </tr>
    <tr>
        <td colspan="7"></td>
    </tr>

    }

}

With this, it was this way when you have more than one item, it has a small space, but for me it is not a problem because it makes it easier to see the data:

    
21.05.2018 / 21:01
How to understand the data flow of a Promise in ES6? Paint the value slider after passing with the handle