How to set table cell padding from CSS?

Question

I am struggling with a cell padding issue in a given HTML table (generated by Drupal).

The table is the following:

I tried the following:

.view-thumbnails-of-tips-and-tricks {
    padding: 10px 10px 10px 10px;  
}

I want to adding padding around cell content as following:

Unfortunately, the padding goes around the table, rather than the cells' content. How can I solve this?

Answer 1

.view-thumbnails-of-tips-and-tricks tr td {
    padding: 10px;  
}

Answer 2

Specify td after your class:

.view-thumbnails-of-tips-and-tricks td {
    padding: 10px;  
}

Also, make sure to set cellpadding to zero in the HTML in case user-agent stylesheets provide their own value. This value may override or add to the CSS value.

<table cellpadding="0">

Answer 3

You should set css to that cell, not the holder.

So you can set class name for that cell and customize the css.

e.g: .view-thumbnails-of-tips-and-tricks td { padding: 10px; }

Hope this help

Answer 4

Try defining your style like this:

.view-thumbnails-of-tips-and-tricks td {
    padding: 10px 10px 10px 10px;
}

It means that you are defining style for:

1. top div (identifier ".view-thumbnails-of-tips-and-tricks")
2. table inside that div ("td")