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 br
s 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.
精彩评论