Tabellcellsplaceringsbryderier

8 svar · 388 visningar · startad av @nders 29 juli 2004

@ndersMedlem sedan juni 200032 967 inlägg

Trådstart29 juli 2004 07:51#1

Hej!

Jag har en tabell som ser ut så här:

<table style="width:590px;">
	<tr>
		<td class="foo"><xsl:value-of select="@quantity"/>x</td>
		<td class="foo"><xsl:value-of select="@itemNumber"/></td>
		<td class="bar"><xsl:value-of select="@name"/></td>
		<td class="bar"><xsl:value-of select="@price"/></td>
	</tr>
</table>

Jag vill att de tre vänstraste cellerna ska få ta så mycket utrymme de behöver, men ändå vara så pass mycket till vänster som det går. Den högraste skall alltid vara längst till höger. Hur jag göra? Så som koden ser ut nu sträcks utrymmet mellan cellerna ut, och allting ser liksom jätteilla ut.

(Det kommer att finnas x tabellrader med dynamiskt data)

Mvh och tpf,

jarvkloMedlem sedan juli 20013 378 inlägg

29 juli 2004 09:12#2

Hmm...

Det låter som ett skolboksexempel för använding av <col> och <colgroup> (speciellt som du har olika klasser som, såvitt jag förstår dig inte har direkt med kolumnbredderna att göra )...
Nu kan jag ju bara gissa vilka proportioner du vill ha, men iallafall, men med colgroup kan du speca "sammanlagd bredd" för några av kolumnerna (de tre första i exemplet)

<table style="width:590px;">
<colgroup style="width:30%">
  <col>
  <col>
  <col>
</colgroup>
<col>
<tr>
  ...
</tr>
</table>

... och kör du xhtml är det naturligtvis <col/> och <colgroup>

@ndersMedlem sedan juni 200032 967 inlägg

29 juli 2004 11:16#3

Tack för förslaget!

Det verkar dock inte riktigt vara vad jag är ute efter. Den angivna bredden appliceras per cell, vilket innebär att jag får tre celler som är vardera 30% stora, och en fjärde med bredden 10%. Den är visserligen längst till höger.

Jag skulle vilja att de tre cellerna till vänster bara tar så mycket utrymme de behöver, och att den fjärde cellen tar resten. Jag vill alltså inte speca bredd på någon av cellerna.

Fatten sie?

jarvkloMedlem sedan juli 20013 378 inlägg

29 juli 2004 12:28#4

Ich fatte... Und habe nur ein klienes fehler gemacht

Det jag missade var hur colgroup propagerar värden...
Egentligen borde width="0*" ha funkat, men det fattar inte MSIE.
Men det är väl inget fel på en hederlig gammal "låt-dem-växa-genom-att-ge-dem-för-små-bredder"-lösning heller

<table style="width:590px;">
<colgroup width="1">
  <col/>
  <col/>
  <col/>
</colgroup>
<col />
...
...
...
</table>

Den här gången testade jag (xhtml 1.0 - Standards mode) dessutom min kod :birp

@ndersMedlem sedan juni 200032 967 inlägg

29 juli 2004 12:38#5

jarvklo skrev:

Men det är väl inget fel på en hederlig gammal "låt-dem-växa-genom-att-ge-dem-för-små-bredder"-lösning heller

Nepp, och det hade jag tidigare testat, utan <colgroup> visserligen, men med samma resultat, radbrytningar som heter duga.

Exempel med innehåll:

<table style="width:590px;" border="1">
	<colgroup width="1px">
		<col/>
		<col/>
		<col/>
	</colgroup>
	<col/>
	<tr>
		<td class="txt10px">1x</td>
		<td class="txt10px">VFY:C1110-41DK</td>
		<td class="txt10px">LIFEBOOK C1110 Centrino PM-1,5Ghz 2...</td>
		<td class="txt10px">8201</td>
	</tr>
</table>

Så fort det kan radbrytas, så radbryts det. Jag vill ju att cellerna ska få expandera om innehållsbredden kräver det.

Går det?

Eller är jag otydlig?

Tack för hjälpen!

jarvkloMedlem sedan juli 20013 378 inlägg

29 juli 2004 12:57#6

Inte är du otydlig inte...
Det var bara jag som missade white-space-problematiken i värmen

<td nowrap="nowrap">

Eller kör du Strict - då är det CSS som gäller:

white-space:pre

eller

white-space:nowrap

@ndersMedlem sedan juni 200032 967 inlägg

29 juli 2004 13:04#7

Jag funderar på om jag gör något fundamentalt genomgalet, men det händer ingenting när jag försöker lägga till detta.

Dessutom är jag inte riktigt ute efter att det aldrig ska radbrytas, utan bara att det inte ska radbrytas i onödan...

Jag vill gärna att tredje cellen radbryts, om det behövs för att inte tabellen ska bli bredare än 590 pixlar.

Mvh

jarvkloMedlem sedan juli 20013 378 inlägg

29 juli 2004 17:54#8

Hmm..

Ja då var det värre förståss...
Följande funkar i "moderna webbläsare" (dvs icke-MSIE)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
	<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
	<title>Ett litet Test</title>
<style type="text/css">
<!--
table, td {border:1px solid navy}
tr {white-space:nowrap} /* alla celler på raden */
td+td+td+td {white-space:normal} /* 4:e kolumnen */
-->
</style>
  </head>
<body>
<table style="width:590px;">
<colgroup width="0*"><col/><col/><col/></colgroup><col/>
<tr>
  <td class="txt10px">1x</td>
  <td class="txt10px">VFY:C1110-41DK</td>
  <td class="txt10px">LIFEBOOK C1110 Centrino PM-1,5Ghz 2...</td>
  <td class="txt10px">8201</td>
</tr>
</table>

</body>
</html>

Ack hur underbart vore det inte att koda webbsidor om man inte behövde ta hänsyn till släpankaret MSIE6 - men nejdå ... Inte ens "width="0*" på en <col> eller en <colgroup> (eller "1*", "2*", "3*" osv för den dellen, som alla alltså är godkända bredder på tabellkolumner ända sedan HTML4 fastställdes i december 1997) stödjer man som man skall :bla

källa: http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4.1

Men hur det än är med det så finns det såvitt jag kan komma på inga mekanismer (utom möjligen något fiffigt Javascript) som kan radbryta en cell, men bara när tabellen riskerar att bli bredare än ett viss värde

@ndersMedlem sedan juni 200032 967 inlägg

30 juli 2004 06:58#9

Ack hur underbart vore det inte att koda webbsidor

Ack hur underbart vore det inte att slippa...

Tack så mycket för hjälpen, jarvklo. Dessvärre använder 98% av våra kunder (och 100% av våra utvecklare ) MSIE, så jag får väl hitta på något.

Dock är det lite märkligt, eftersom jag tycker att jag kan inte direkt vara ensam om önskemålen att det ska se hyggligt ut när man använder tabeller.

Man kanske kan lösa det om man använder Flash?

Slutsats: :bla på Microsoft, men tack för ny fin kunskap!

Mvh