Таблица с сылкок по всей ширине

CoDy · May 19, 2011

Всем хи...

Есть задача: сделать таблицу, в которой вся строка являлась ссылкой.

Вот придумал вот такое решение:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<style type="text/css">		
		/*	Reset блок */
    	/* http://meyerweb.com/eric/tools/css/reset/ 
   		v2.0 | 20110126
   		License: none (public domain)
    	*/
    	html, body, div, span, applet, object, iframe,
    	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    	a, abbr, acronym, address, big, cite, code,
    	del, dfn, em, img, ins, kbd, q, s, samp,
    	small, strike, strong, sub, sup, tt, var,
    	b, u, i, center,
    	dl, dt, dd, ol, ul, li,
    	fieldset, form, label, legend,
    	table, caption, tbody, tfoot, thead, tr, th, td,
    	article, aside, canvas, details, embed, 
    	figure, figcaption, footer, header, hgroup, 
    	menu, nav, output, ruby, section, summary,
    	time, mark, audio, video {
    		margin: 0;
    		padding: 0;
    		border: 0;
    		font-size: 100%;
    		font: inherit;
    		vertical-align: baseline;
    	}
    	/* HTML5 display-role reset for older browsers */
    	article, aside, details, figcaption, figure, 
    	footer, header, hgroup, menu, nav, section {
    		display: block;
    	}
    	body {
    		line-height: 1;
    	}
    	ol, ul {
    		list-style: none;
    	}
    	blockquote, q {
    		quotes: none;
    	}
    	blockquote:before, blockquote:after,
    	q:before, q:after {
    		content: '';
    		content: none;
    	}
    	table {
    		border-collapse: collapse;
    		border-spacing: 0;
    	}



    	/*	Блок описания */
		.b-table {	
			position: relative;
		}
		.b-table .table {
			width: 100%;
		}
		.b-table .drow {
		}
		.b-table .lcell {
			vertical-align: top;
		}
		.b-table .link {
			width: 100%;

			position: absolute;
			display: block;
		}



    	/* Стилизация */
		.b-table-style {
			width: 500px;
		}
		.b-table-style table,
		.b-table-style tr {
			border: 1px solid #000;
		}
		.b-table-style .drow:HOVER {
			background-color: #ccc;
		}
		.b-table-style .link {
			text-decoration: none;
			color: #000;
		}				
	</style>
</head>
<body>
	<div class="b-table b-table-style">

		<table class="table">
	     	<thead>
	     		<tr>
					<th>Наименование</th>
					<th>Номер</th>
					<th>Фирма</th>
	     		</tr>

	     	</thead>
	     	<tbody>
	     		<tr class="drow">
					<td class="lcell"><a class="link" title="" href="#">прокладка клап. крышки</a></td>
					<td>12341-P08-000</td>
					<td>honda</td>	       			
	     		</tr>								
					<tr class="drow">

					<td class="lcell"><a class="link" title="" href="#">прокладка клап. крышки</a></td>
					<td>12341-PO8-000</td>
					<td>honda</td>	       			
	     		</tr>								          	
	     	</tbody>  
		</table>
	</div>
</body>
</html>

Но он мне не сильно нравиться, поскольку накладывает следующие ограничения:

- ссылка должна быть в первой колонке;

- нельзя отцентрировать текст в ячейках по вертикали;

- не работает в IE6.

Может есть другой подход? Делать ссылками все ячейки очень не хочется.

D1mK4 · May 19, 2011

а не судьба атрибуту а задать width и height?

CoDy · May 19, 2011

а не судьба атрибуту а задать width и height?

С какой целью это делать?? Какую проблему это решает??

Softlink · May 20, 2011

ну еще есть один громоздкий вариант - это вложить в ячейку таблицу и сделать ее ссылкой.

Sign In

Таблица с сылкок по всей ширине

Question

CoDy

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

D1mK4

Link to comment

Share on other sites

CoDy

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information