Высота ячейки, выравнивание, collapse...

kalyaka-malyaka · January 22, 2009

всем привет.

табличка должна быть такой:

http://www.afi-pallada.ho.ua/table/table.jpg

a получается такая хрень:

http://www.afi-pallada.ho.ua/table/signup.html

код:

<div class="right">
	<table cellpadding="0" cellspacing="0">
		<tr>
			<td class="left th no-bg">Feature</td>
			<td class="th">Members</td>
			<td class="th">Non Members</td>
		</tr>
		<tr>
			<td class="left">Play Short Clips</td>
			<td><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
			<td><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
		</tr>
		<tr>
			<td class="left">Play Full Videos</td>
			<td><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
			<td><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
		</tr>
		<tr>
			<td class="left">Download Full Videos </td>
			<td><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
			<td><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
		</tr>
		<tr>
			<td class="left">Upload Videos </td>
			<td><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
			<td><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
		</tr>
		<tr>
			<td class="left">Comment, Rate Videos </td>
			<td><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
			<td><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
		</tr>
		<tr>
			<td class="left">View User Submitted Photos & Videos </td>
			<td><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
			<td><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
		</tr>
		<tr>
			<td class="left">Another feature </td>
			<td><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
			<td><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
		</tr>
		<tr>
			<td class="left">Another feature </td>
			<td><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
			<td><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
		</tr>
		<tr>
			<td class="left">Another feature </td>
			<td><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
			<td><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
		</tr>
		<tr>
			<td class="left">Another feature </td>
			<td><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
			<td><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
		</tr>
	</table>
</div>

стили:

.right {
	float: left;
	padding: 0px 14px 0px 6px;
	width: 453px;
}
.right table {
	border-collapse: collapse;
}
.right table td {
	border: solid 1px #d3d3d3;
	text-align: center;
	vertical-align: middle;
	width: 94px;
	color: #1c1c1c;
}
.right table td.left {
	text-align: left;
	vertical-align: middle;
	width: 250px;
}
.right table td.th {
	color: #ff2326;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	height: 54px;
}
.right table td.left, .right table td.th {
	background-color: #f0f0f0;
}
.right table td.no-bg {
	background-color: transparent;
}

что ее распирает, заразу, по высоте? помогает только жесткую высоту поставить. но мне жесткая не нужна, хотела просто padding использовать.

почему в левом столбике текст не middle? почему в том же левом столбике collapse не срабатывает?

я уже ничего не понимаю

и еще совет нужен. расстояния между шапкой и телом и между столбиками видите? как посоветуете их сделать? margin не работает. cellspacing будет по всему периметру и во всех ячейках отступать. а пустые ячейки для отступа делать - неспортивно как-то, не хочется. есть какие-нибудь варианты?

Edited January 22, 2009 by kalyaka-malyaka

Searcher · January 22, 2009

у вас конфликт имен классов

в левых ячейках вы используете класс .right table td.left {...}, но помимо этого класса left есть еще свободный класс .left, это signup.css (line 82) и signup.css (line 78) оттуда наследуется padding и float, в результате эти ячейки не слушаются

переименуйте .right table td.left допустим в .right table td.lefttd и все

а отступы, чтобы не мучиться, я бы сделал пустыми ячейками...

kalyaka-malyaka · January 22, 2009

у вас конфликт имен классов
в левых ячейках вы используете класс .right table td.left {...}, но помимо этого класса left есть еще свободный класс .left, это signup.css (line 82) и signup.css (line 78) оттуда наследуется padding и float, в результате эти ячейки не слушаются
переименуйте .right table td.left допустим в .right table td.lefttd и все
а отступы, чтобы не мучиться, я бы сделал пустыми ячейками...

вот дура спасибо ))))))))))

а про отступы - уже так и делаю. хотя некрасиво

Searcher · January 22, 2009

не за что, рад помочь ))

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>test</title>
<style type="text/css">
<!--
body, html {
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  }

.right {
float: left;
padding: 0px 14px 0px 6px;
width: 453px;
}
.right table tbody tr {
position:relative; top:7px;
}
.right table tbody td {
border-bottom: none;
}
.right table tr.bot td {
border: solid 1px #d3d3d3;
}
.right table td.r1 {
position:relative;
left:3px;
}
.right table td.r2 {
position:relative;
left:6px;
}
.right table td {
border: solid 1px #d3d3d3;
text-align: center;
vertical-align: middle;
width: 94px;
color: #1c1c1c;
}
.right table td.left {
text-align: left;
vertical-align: middle;
width: 250px;
}
.right table td.th {
color: #ff2326;
font-size: 16px;
font-weight: bold;
text-align: left;
height: 54px;
}
.right table td.left, .right table td.th {
background-color: #f0f0f0;
}
.right table td.no-bg {
background-color: transparent;
}
-->
</style>
</head>

<body>

<div class="right">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<td class="left th no-bg">Feature</td>
<td class="r1 th">Members</td>
<td class="r2 th">Non Members</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Play Short Clips</td>
<td class="r1"><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
<td class="r2"><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
</tr>
<tr>
<td class="left">Play Full Videos</td>
<td class="r1"><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
<td class="r2"><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
</tr>
<tr>
<td class="left">Download Full Videos </td>
<td class="r1"><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
<td class="r2"><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
</tr>
<tr>
<td class="left">Upload Videos </td>
<td class="r1"><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
<td class="r2"><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
</tr>
<tr>
<td class="left">Comment, Rate Videos </td>
<td class="r1"><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
<td class="r2"><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
</tr>
<tr>
<td class="left">View User Submitted Photos & Videos </td>
<td class="r1"><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
<td class="r2"><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
</tr>
<tr>
<td class="left">Another feature </td>
<td class="r1"><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
<td class="r2"><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
</tr>
<tr>
<td class="left">Another feature </td>
<td class="r1"><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
<td class="r2"><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
</tr>
<tr>
<td class="left">Another feature </td>
<td class="r1"><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
<td class="r2"><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
</tr>
<tr class="bot">
<td class="left">Another feature </td>
<td class="r1"><img src="images/design/signup/yes.gif" width="15" height="15" alt="yes" /></td>
<td class="r2"><img src="images/design/signup/no.gif" width="15" height="15" alt="no" /></td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

kalyaka-malyaka · January 22, 2009

только в ie сдвигает. я уже смирилась с пустышками

Sign In

Высота ячейки, выравнивание, collapse...

Question

kalyaka-malyaka

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

kalyaka-malyaka

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

kalyaka-malyaka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information