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

Asked

Viewed 668 times

0

I have a Select in bank that returns me a number of records, in the case of tax 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, does not displace the second record): inserir a descrição da imagem aqui

However, when there is more than one item for a certain note, it is getting that way:

inserir a descrição da imagem aqui

How I’d like you to stay:

inserir a descrição da imagem aqui

The HTML is this way (I’m using the MVC standard, I mean the HTML is my View, and for the Model and Controller I’m using C#):

    <div class="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 walking the 1st line in foreach and so on...

  • As far as I can remember, there is no "break" in the line between <tr>, what you could do is create a new <tr> and use the attribute colspan in <td> to achieve the desired presentation.

  • @Leandroangelo worked, I’ll post in the comment to you see how it turned out! Thanks =)

  • Publish the solution as a response.

  • Thanks! I’m still new to html so I don’t have much knowledge about tags and how to use them in the best way, slowly improving =)

1 answer

0


Thanks to Leandro in the comment above, I used the attribute <colspan> and made some modifications, which stayed that way:

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 it has more than one item, it had a small spacing, but for me it is not a problem because it makes it easier to visualize the data:

inserir a descrição da imagem aqui

Browser other questions tagged

You are not signed in. Login or sign up in order to post.