Rows of DataTable Bootstrap in a single line ASP.net MVC

Navigation
1

I want all the rows to be in one line.

As you can see below, I have a view where I get a dynamic datatable that was fed by a Json, I do not know the name of the rows or columns so I can not put a fixed width to all columns 

<table id="example1" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                @foreach (System.Data.DataColumn col in Model.Columns)
                                {
                                    <th class="text-center">@col.Caption</th>
                                } 
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (System.Data.DataRow row in Model.Rows)
                            {
                                <tr>
                                    @foreach (var cell in row.ItemArray)
                                    {
                                        <td class="text-center" style="padding-top:0%; padding-bottom:0%;">@cell.ToString()</td>
                                    }
                                </tr>
                            }
                        </tbody>
                    </table>

As you can see I have columns with up to 3 lines in a row. There is a form of self self Adjust that width. Knowing that when I insert the columns I still do not know what size that column will be.

    
asked by Elvin Acevedo 08.02.2017 в 20:11
source

3 answers

2

You just have to put <tr style="white-space:nowrap;"> in each <tr></tr> and you're done. Thanks to those who responded.

    
answered by 20.02.2017 / 20:58
source
1

When styling each <td> do it with width to 100%: 

style="padding-top:0%; padding-bottom:0%; width: 100%"

So that your line <td> is finally in this way: 

<td class="text-center" style="padding-top:0%; padding-bottom:0%; width: 100%">@cell.ToString()</td>
    
answered by 08.02.2017 в 20:37
1

With ColumnDefs you can define several parameters of the table Datatables , in the section of Related You will see the possible options that you can configure, where until the end you will find columns. width

Example: 

$('#example').dataTable( {
    "columnDefs": [
        { "width": "20%", "targets": 0 },
        { "width": "20%", "targets": [1,3] },
        //agregar un arreglo [0,n] tomara todas esas posisiones para darle el mismo ancho de 0 a n.
        { "width": "20%", "targets": 4 },
        { "width": "20%", "targets": 5 }
    ]
} );

or you can give the direct width to the header with: 

<th class="text-center" width="20px">@col.Caption</th>
<th class="text-center" width="150px">@col.Caption</th>
...

This last one would be complicated in your code.

    
answered by 08.02.2017 в 20:41
Problem when saving in snake game How does a windows form timer work internally?