CSS表格填充问题

Question

I need help with some CSS styling.

I have made a table with 2 rows, and 2 columns, but the first column in the first row has a rowspan of 2. That creates a table like this: http://i.imgur.com/UjdSwu5.png , which is fine.

My problem is that when I try to apply padding to the 'name' and 'id' cells (but not the image cell), only the name cell gets padded. Here is a screenshot of no padding: http://i.imgur.com/0CGVhDL.png , and here is a screenshot of when I try to pad both cells: http://i.imgur.com/ipvHv2M.png

HTML:

<div id="body">
  <div>
    <div>
      <div>
        <div id="content">
          <div id="items">
            <ul class="list">
              <li>
                <table border="0">
                  <tr>
                    <td rowspan="2"><a href="index.html"><img
                      src="images/Stone.png" alt="Image" height="50" width="50"></a>
                    </td>
                    <td>
                      <h3 class="name">Stone</h3>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p class="id">1</p>
                    </td>
                  </tr>
                </table>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

#content td h3 {
  padding:5px 1px 5px 30px;
}

#content td p {
  padding:5px 1px 5px 30px;
}

If I do the following then the id cell gets padded how i want it to, but it also pads the img cell.

#content td {
  padding:5px 1px 5px 30px;
}

What am i doing wrong?

Answer 1

you are simply applying padding to the wrong element.

you are applying a padding to the h3 and p elements inside #content td but what you really want to do is apply the padding to the cell which is td .

In order to that properly, you need to identify your cells, like this:

<td class="name">
  <h3>Stone</h3>
</td>

and

<td class="id">
    <p>1</p>
</td>

and the CSS should be something like this

#content td.name {
  padding:5px 1px 5px 30px;
}

#content td.id {
  padding:5px 1px 5px 30px;
}

Also, a good practice would be not to name a class as id that could be very confusing afterwards.

I would advise calling it item-id instead, for example.

<td class="item-id">
    <p>1</p>
</td>

#content td.item-id {
  padding:5px 1px 5px 30px;
}

Answer 2

First of all, I suggest using the class-name of the elements, to style them.

Here's the css which should do what you want:

.name, .id{
    padding: 80px;
}

In this fiddle, you can see a working solution: http://jsfiddle.net/63eUh/

As Kevin Smouts already said, you applied the padding to the wrong Element - which can easly happen, when you are adressing Elements in this way - it's difficult to read.

Whenever you change your HTML-structure, you have to care about css and update it as well. So I really don't recommend putting all your html-tree inside css to reach the correct elements.