开发者

Nested table alignment?

开发者 https://www.devze.com 2023-04-04 21:21 出处：网络

How can I keep the rows aligned in the following nested tables? <!DOCTYPE html> <html> <body>

相关专题：html-table

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.