开发者

Nested table alignment?

How can I keep the rows aligned in the following nested tables?

<!DOCTYPE html>
<html>
<body>
  <table>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
    </tr>
    <tr>
      <td>
    <input />
    <div><a href="#">Delete</a></div>
      </td>
      <td><input /></td>
      <td>
    <table>
      <tr&开发者_StackOverflow社区gt;
        <td><input  /></td>
        <td><input  /></td>
        <td><a href="#">Delete</a></td>
      </tr>
    </table>
    <a href="#" >Add</a>
      </td>
    </tr>
  </table>
</body>
</html>


A really quick and simple way is to use two brs here

    <td><input /><br /><br /></td>

Example: http://jsfiddle.net/jasongennaro/QZW8X/

You could also use vertical-align

    <td style="vertical-align:top;"><input /></td>

Example 2: http://jsfiddle.net/jasongennaro/QZW8X/1/


You might be better off joining and/or splitting cells using colspan instead of nesting tables. If your using Visual Studio, the Table menu allows you to do it visually.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜