Fieldset and table row alignments

**crptcblade** · Sep 22nd, 2005, 02:57 PM

With the following...

Code:

<style>
	fieldset {
		display : inline;
	}
</style>

	<body>
	
		<table>
			<tr>
				<td rowspan="5">
					<fieldset>
						<legend>Test title</legend>
						<table>
							<tr>
								<td>Testing: <input type="text" /></td>
							</tr>
							<tr>
								<td>Testing: <input type="text" /></td>
							</tr>
							<tr>
								<td>Testing: <input type="text" /></td>
							</tr>
							<tr>
								<td>Testing: <input type="text" /></td>
							</tr>
						</table>
					</fieldset>
				</td>
			</tr>
			<tr>
				<td>Testing: <input type="text" /></td>
			</tr>
			<tr>
				<td>Testing: <input type="text" /></td>
			</tr>
			<tr>
				<td>Testing: <input type="text" /></td>
			</tr>
			<tr>
				<td>Testing: <input type="text" /></td>
			</tr>
		</table>

I get this...

But what I really need is this...

Is there a way to preserve the same row alignments outside the fieldset as within?

**visualAd** · Sep 23rd, 2005, 05:54 PM

What you really have is two tables. One beside the other - I suppose you could fiddle around with the margins and paddings of the TD elements using CSS, but, the best option will be to create another table. You canuse the tabindex attribute if you want to traverse them in a more logical order.

Code:

<html>
	<head>
<style>
	fieldset {
		display : inline;
	}

	fieldset legend {
		height: 15px;
	}

	.fake_fieldset {
		margin-top: 15px;
	}
</style>

	<body>
	
		<table>
			<tr>
				<td rowspan="5">
					<fieldset>
						<legend>Test title</legend>
						<table>
							<tr>
								<td>Testing: <input type="text" /></td>
							</tr>
							<tr>
								<td>Testing: <input type="text" /></td>
							</tr>
							<tr>
								<td>Testing: <input type="text" /></td>
							</tr>
							<tr>
								<td>Testing: <input type="text" /></td>
							</tr>
						</table>
					</fieldset>
				</td>
				<td>
					<div class="fake_fieldset">
						<table>
							<tr>
								<td>Testing: <input type="text" /></td>
							</tr>
							<tr>
								<td>Testing: <input type="text" /></td>
							</tr>
							<tr>
								<td>Testing: <input type="text" /></td>
							</tr>
							<tr>
								<td>Testing: <input type="text" /></td>
							</tr>
						</table>
					</div>
				</td>
			</tr>	
		</table>
	</body>
</html>

Don't forget to fix the height of the legend to ensure the fields align.

Thread: Fieldset and table row alignments

Thread Tools

Display

Fieldset and table row alignments

Re: Fieldset and table row alignments

Posting Permissions