Table Striping not working

jswaringen

I'm trying to get the table striping. I've setup the various class but it doesn't work. I also noticed that it doesn't work in the example code provided in the documentation. Since I am not using Bootstrap so it's being difficult?

F12Magic

Hi jswaringen,
The striping in the example base-style stripe is working on IE11 and FF 47 with me. A very light grey is used and on some monitors it's hardly noticeable.
Can you check if you used the class stripe in your table tag?

jswaringen

I believe I'm using it the correct way. Here's what I have.

Here's my table code:

<table id="tblLocationContacts" style="width: 100%; background-color: #E8E8E8;" class="stripe">
                        <thead>
                            <tr>
                                <th style="width:30%">Name</th>
                                <th style="width: 45%; padding-left: 2px;">Method</th>
                                <th style="width:15%; text-align: right;">&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var location in Model.CustomerLocation.ContactCustomerLocationList)
                            {
                                @Html.Partial("_ContactInfo", location.Contact)
                            }
                            </tbody>
                    </table>

And here's my CSS:

        .stripe1 {
            background-color: #E8E8E8;
        }
        .stripe2 {
            background-color: #c0c0c0;
            border-bottom: solid #c0c0c0;
        }

This is the JavaScript:

            $('#tblCustomerContacts').DataTable({
                    "ordering": false,
                    "searching": false,
                    "lengthChange": false,
                    "pageLenght":10,
                    'stripeClasses':['stripe1','stripe2']
                });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

If you are including the DataTables stylesheet then the above style won't be shown because DataTables' own styling for the row background uses a more specific selector than your own. If you make the selector at least as specific it works: http://live.datatables.net/welezolo/1/edit .

The MDN article on this topic is a good introduction if you are interested in learning more.

Allan

southfanning

I followed the example at your link, and when I run it I see my row has class of stripe1/stripe2, but the background is still white. I'm using jqueryui theme though, does that change things?

allan

I'd suggest right clicking on a cell in your table and select "Inspect". Then look in the "Styles" part of the inspector and it will show you what styles are overriding your own.

Allan