Question

Please see this : http://jsfiddle.net/ymSpY/. If you can see <td> has an inner table. The inner table inherits the style from the parent table. The inner table has borders. How can I make the border invisible or remove it? As you can see the markup of the inner table it has style="border-collapse: collapse;" and I even tried border=0 but it doesn’t work. The border of the inner/child table is still there.

Answer 1

I’d probably create a separate class for the child table, but short of that, here is one solution:

.dataTable td table, .dataTable td table tbody, .dataTable td table td {
    border:none;
}

http://jsfiddle.net/ymSpY/6/

EDIT: here’s one with a class defined for a child table, this may give you more flexibility once you start adding other elements to your main dataTable.
http://jsfiddle.net/ymSpY/11/