ugrás a tartalomhoz

inline-table eltartás megszüntetése

unregistered · 2009. Nov. 3. (K), 14.06
Van nekem egy táblázatom (valójában több csak 1nek látszik).
Úgy épül fel hogy PHP generál táblákat SQL-ből amiket egymás mellé helyez el. Ez eddig jó is lenne csak a táblák között van pár pixel távolság amiket nem lehet eltüntetni hogy egybe olvadjon...

"inline-table"-t használok (float helyett), mert a legenerálódott tábláknak középre kell igazodniuk ahogy azt most szépen teszik is.

Részlet a problémáról ahogy most kinéz:



...és így kellene:



Hogy lehet ezt megszüntetni?
‹ linkre (szövegre) form submit? Több file karakterkódolásának megváltoztatása egyszerre ›
 ■
1

kód

unregistered · 2009. Nov. 3. (K), 14.07
Jah a kódot elfelejtettem:

style.css

body {
	margin: 20px 0 0 0;
	font: 12px Tahoma;
	color: #808080;
}

	#page_center {
		width: 770px;
		margin: 0 auto;
	}

		#middle {
			width: 770px;
			background: url("../img/bg.png") 0 0 repeat-y;
		}
		
			#content {
				clear: both;
				width: 710px;
				padding: 1px 30px 10px 30px;
				overflow: hidden;
			}

.antropo_table {
	display: inline-table;
	margin: 0;
	padding: 0;
	border-spacing: 0;
	border-collapse: collapse;
}

.col1 {
	width: 20px;
	padding: 0;
	border: 1px solid #bfbfbf;
	text-align: center;
	font: 12px Tahoma;
	color: #808080;
}


.col2 {
	height: 20px;
	padding: 0 3px 0 3px;
	border: 1px solid #bfbfbf;
	font: 12px Tahoma;
	color: #808080;
}

.col3 {
	height: 20px;
	padding: 0 3px 0 3px;
	border: 1px solid #bfbfbf;
	text-align: center;
	font: 12px Tahoma;
	color: #808080;
}

.antropo_repeat_table {
	display: inline-table;
	margin: 0;
	padding: 0;
	border-spacing: 0;
	border-collapse: collapse;
}

.col_repeat {
	height: 20px;
	padding: 0;
	margin: 0;
	text-align: center;
	border: 1px solid #bfbfbf;
	color: #808080;
}

	.antro_input {
		height: 17px;
		width: 60px;
		padding: 0;
		margin: 1px 0 0 0;
		text-align: center;
		border: none;
	}

.clear_cell {
	height: 10px;
	border: none;
}
index.html (ami php valójában de az most mindegy)

<!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>
		<title>Teszt</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>

	<body>
		<div id="page_center">
			
			<div id="middle">
				<div id="content">
				
					<div style="text-align:center;">
						<table class="antropo_table">
							<tr>
								<td class="col1" rowspan="3">A<br />B<br />C</td>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
							<tr>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
							<tr>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
								<td class="clear_cell" colspan="3"></td>
							</tr>
							<tr>
								<td class="col1" rowspan="3">A<br />B<br />C</td>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
							<tr>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
							<tr>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
								<td class="clear_cell" colspan="3"></td>
							</tr>
							<tr>
								<td class="col1" rowspan="3">A<br />B<br />C</td>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
							<tr>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
							<tr>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
						</table>
						
						<table class="antropo_repeat_table">
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="clear_cell"></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="clear_cell"></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
						</table>
						
						<table class="antropo_repeat_table">
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="clear_cell"></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="clear_cell"></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
						</table>
					</div>
				
				</div>
			</div>
			
		</div>
	</body>

</html>
2

<div style="text-align:center;"> helyett

zforgo · 2009. Nov. 3. (K), 15.56
Üdv!

<div style="text-align:center;"> helyett
<div style="display:table; margin: 0px auto;">

Valamint javítsd ki a legelső táblázatod clear_cell sorait (nincs nyitó tr)
3

siker :) de nem értem :(

unregistered · 2009. Nov. 3. (K), 17.54
A nyitó tr csak az ide bemásolt (és átalakított) példában maradt le :(
Köszönöm szépen a display:table... működött. A miért-et megosztod velem? Nem értem, mitől függ hogy center, vagy a te megoldásod? :(
Köszönöm!