Creating a Vertically Oriented Table

For the project that I’m working on at my company, one of the pages required developing a table that was vertically oriented (first cell in each row is a header, each data item takes a column). It also had to be editable in place, which means that using a traditional table would be extremely difficult and hackish. I settled on using unordered lists and some jQuery to give the appearance of a table, and it seems to have worked out splendidly.

CSS Styles

.table-container {
	border: 1px solid #AAAAAA;
}
.vertical-list-container {
	overflow-x:scroll;
	width: 600px;
	border-left: 1px solid #AAAAAA;
}
.vertical-list {
	float: left;
	width: 230px;
	padding-bottom:10px;
}
.vertical-list .label {
	padding-right: 14px;
	text-align:left !important;
	font-weight: bold;
}
.vertical-list li {
	vertical-align: middle;
	text-align: center;
	margin-top: 5px;
	padding: 5px 10px;
	min-height: 15px;
	border-bottom: 1px dotted #E0E0E0;
	border-right: 1px dotted #E0E0E0;
}

jQuery magic to make it more table-y. This code basically extends the inner section (id = “scroller”) to the maximum width of the table columns (based on how many there are). It then stretches the container to fit within the whole parent container that the scroll bar will go all the way across. Finally, it loops through each column, and then uses a custom selector to find any cell heights that are above the minimum amount, and then updates all of the heights for those rows

jQuery

$.extend($.expr[':'], {
	height: function (a, i, m) {
		//Check to make sure it's :height(>##) or :height(<##)
		if (!m[3] || !(/^()\d+$/).test(m[3])) { return false; }
		return m[3].substr(0, 1) === ">" ?
						$(a).height() > m[3].substr(1) : $(a).height() 15)").each(function (index) {
			var z = $(this).index();
			var height = $(this).height();
			$(".vertical-list").each(function (y) {
				$(this).find("li:eq(" + z + ")").height(height);
			});
		});
	});
});

Then finally, here’s the structure for the HTML code that displays the data

HTML

<div class="table-container">
	<ul class="vertical-list float-left">
		<li>Row Header</li>
		<li>Row Header</li>
	</ul>
	<div class="vertical-list-container">
		<div id="scroller">
			<ul class="vertical-list">
				<li>Item 1, Field 1</li>
				<li>Item 1, Field 2</li>
			</ul>
			<ul class="vertical-list">
				<li>Item 2, Field 1</li>
				<li>Item 2, Field 2</li>
			</ul>
		</div>
	</div>
</div>