ugrás a tartalomhoz

CSS/XHTML - táblázatok float:left-elve majd ez egész középre hogyan?

unregistered · 2009. Okt. 15. (Cs), 15.10
Hello!

Olyan problémám adódott, hogy van egy div-em azon belül 2 táblázat. Ez a két táblázat egymás mellé van helyezve (mindkettő float:left;-el). Ilyenkor ugye az első táblázat is balra záródik a div-en belül a második meg mellé... A kérdésem az lenne: hogy lehet ezt a két egymás mellett lévő táblát középre igazítani div-en belül?
(fix távolságot az oldalaktól nem lehet megadni mivel a második tábla egy sablon tábla ami feltöltődik adatokkal SQL-ből majd ha megtelt "csinál" egy 3. táblát ami a már meglévő kettő mellé jön és így tovább... magyarul randomra szélesedik ez az egész csak a div amiben benne vannak az fix szélességű kb úgy néz ki, hogy a div 700px széles és a táblázatok oszlopai 100px szélesek)

Remélem érhető volt a magyarázatom ;)
Köszönöm előre is!
‹ Jquery sortable draggable CSS - táblázat help IE ›
 ■
1

Az a baj...

whiteman0524 · 2009. Okt. 15. (Cs), 20.17
hogy semminek sincs fix szélessége. Lehetne margin-okkal dolgozni, de ahhoz pár fix dolgot meg kéne határozni. Középre igazítani általában a margin: 0 auto 0 auto; stílussal szoktak, de ez megköveteli annak az elemnek a fix szélességét amit középre akarsz igazítani. Mivel a float-olt táblázataid nem fix szélességűek (illetve azok de több lehet belőlük egymás mellett, tehát mégsem) ezért ez a módszer nem működne. Szóval ezt így (első körben) nem igen lehet megoldani a specifikációid alapján pusztán CSS-el (a tévedés jogát fenntartom :))

Esetleg JavaScript jelenthet megoldást, azzal minden további nélkül meg ehetne oldani. Csak kicsit nehézkes lenne, és az oldal csak a teljes dokumentum betöltődése után rendeződne, ami nem éppen a legszebb megoldás.

Javaslom hogy inkább tervezd át az elrendezésedet. :)
2

inline

Baldric · 2009. Okt. 15. (Cs), 20.59
A táblázatoknak ne float left-et, hanem display: inline-block, vagy inline-table-t adj, ezzel egy sorba kényszeríted őket, a szélességüket érzékelni fogja a felettük álló div is, egyetlen problémát természetesen mindannyiunk "kedvenc" böngészője jelenti...
Szerencsére azért ie alatt is működik a sima display:inline tulajdonság.

Remélem tudtam segíteni, kipróbáltam, nálam szépen működött.

Szerkesztve: Azt kifelejtettem hogy a táblázatokat tedd egy div-be, és add neki a margin: auto; tulajdonságot, ez az egész pedig legyen benne a fix szélességű div-edbe.
Ha a táblázataid szélességét és mennyiségét nem tudod, akkor jó ötlet lehet a legfelső divnek overflow-al megadni hogy jelenjen meg a vízszintes görgetősáv ha szükséges.
3

..

carstepPCE · 2009. Okt. 16. (P), 11.17
Mivel ebben az esetben inline tulajdonsagot kapnak a tablazatok, ezert e legkulso divnek adhatsz text-align -> center -t is, ha nem tevedek. Termeszetesen akkor, ha a kulso (700px szeles ) div-be nem kerul mas tartalom a ket tablazaton kivul.

Mindez csak elmeleti sikon mondom, kiprobalni nem volt lehetosegem, javitsatok, ha tevedek.

Udv.
4

Ha jól gondolom muszáj is

Baldric · 2009. Okt. 16. (P), 12.29
Ha jól gondolom muszáj is megadni a text-align: center-t, legalábbis ie-ben, mert ott ugye nem fogja inline-blokknak tekinteni a táblázatokat. Talán lehetne próbálkozni a haslayout tulajdonsággal, de nem hinném hogy sok értelme lenne, egyszerűbb megadni a text-align-t és a margin:auto-t is, persze így a táblázat celláinak szövege is középre lesz igazítva, de ez már nem okozhat gondot.
5

:)

unregistered · 2009. Okt. 19. (H), 11.58
Köszönöm szépen mindenkinek a segítséget! Baldric megoldása szépen működik!
6

na még egy kérdés:

unregistered · 2009. Okt. 19. (H), 12.28
inline-nál a táblázat egymás mellé igazított oszlopai eltartanak egymástól így:

float-nál nem volt ez a gond... a táblázat ide vonatkozó tulajdonságai:
- margin: 0;
- padding: 0;
- border-spacing: 0;
- border collapse: collapse;

Mitől van ez?
7

border-collapse

gphilip · 2009. Okt. 19. (H), 12.53
azért, mert lehagytál egy kötőjelet: border-collapse

:-)
8

nem nem ;)

unregistered · 2009. Okt. 19. (H), 13.11
A css-ben jól van írva minden, csak ide írtam rosszul mert nem copy/pasteltem ezért sem raktam ilyen code mizériába...
9

collapsed

Arnold Layne · 2009. Okt. 19. (H), 15.46
Usage: table { border-collapse: [collapsed | separate]; }

by: Quick Lookup :-)
10

collapseD?

unregistered · 2009. Okt. 19. (H), 15.56
Dehát a collapsed (d-vel a végén) nem is helyes... W3S
Azért kipróbáltam és tényleg nem helyes, mert d-vel a végén az alapérték (separate) eredmény kapom.

Vagy én nem értem? :(
11

Valóban

Arnold Layne · 2009. Okt. 19. (H), 17.12
Dehát a collapsed (d-vel a végén) nem is helyes...

Igaz, ezúton kérek elnézést a félrevezetésért.
Kipróbáltam, tényleg nem kell a "d" a végére.
Ez van ha az ember vakon csak egy forrásban bízik meg.
12

;)

unregistered · 2009. Okt. 19. (H), 17.51
semmi baj... jóváteheted ha kitalálod a probléma okát ;)
13

Küld valami working copyt,...

gphilip · 2009. Okt. 19. (H), 23.58
...hogy lássuk, miről beszélünk! :-)
14

itt a cucc kb-ra:

unregistered · 2009. Okt. 20. (K), 15.25
style.css
  1. body {  
  2.     margin: 20px 0 0 0;  
  3.     font: 12px Tahoma;  
  4.     color: #808080;  
  5. }  
  6.   
  7.     #page_center {  
  8.         width: 770px;  
  9.         margin: 0 auto;  
  10.     }  
  11.   
  12.         #middle {  
  13.             width: 770px;  
  14.             background: url("../img/bg.png") 0 0 repeat-y;  
  15.         }  
  16.           
  17.             #content {  
  18.                 clear: both;  
  19.                 width: 710px;  
  20.                 padding: 1px 30px 10px 30px;  
  21.                 overflow: hidden;  
  22.             }  
  23.   
  24. .antropo_table {  
  25.     display: inline-table;  
  26.     margin: 0;  
  27.     padding: 0;  
  28.     border-spacing: 0;  
  29.     border-collapse: collapse;  
  30. }  
  31.   
  32. .col1 {  
  33.     width: 20px;  
  34.     padding: 0;  
  35.     border: 1px solid #bfbfbf;  
  36.     text-align: center;  
  37.     font: 12px Tahoma;  
  38.     color: #808080;  
  39. }  
  40.   
  41.   
  42. .col2 {  
  43.     height: 20px;  
  44.     padding: 0 3px 0 3px;  
  45.     border: 1px solid #bfbfbf;  
  46.     font: 12px Tahoma;  
  47.     color: #808080;  
  48. }  
  49.   
  50. .col3 {  
  51.     height: 20px;  
  52.     padding: 0 3px 0 3px;  
  53.     border: 1px solid #bfbfbf;  
  54.     text-align: center;  
  55.     font: 12px Tahoma;  
  56.     color: #808080;  
  57. }  
  58.   
  59. .antropo_repeat_table {  
  60.     display: inline-table;  
  61.     margin: 0;  
  62.     padding: 0;  
  63.     border-spacing: 0;  
  64.     border-collapse: collapse;  
  65. }  
  66.   
  67. .col_repeat {  
  68.     height: 20px;  
  69.     padding: 0;  
  70.     margin: 0;  
  71.     text-align: center;  
  72.     border: 1px solid #bfbfbf;  
  73.     color: #808080;  
  74. }  
  75.   
  76.     .antro_input {  
  77.         height: 17px;  
  78.         width: 60px;  
  79.         padding: 0;  
  80.         margin: 1px 0 0 0;  
  81.         text-align: center;  
  82.         border: none;  
  83.     }  
  84.   
  85. .clear_cell {  
  86.     height: 10px;  
  87.     border: none;  
  88. }  
index.html (ami php valójában de az most mindegy)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <title>Teszt</title>  
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  7.         <link rel="stylesheet" type="text/css" href="style.css" />  
  8.     </head>  
  9.   
  10.     <body>  
  11.         <div id="page_center">  
  12.               
  13.             <div id="middle">  
  14.                 <div id="content">  
  15.                   
  16.                     <div style="text-align:center;">  
  17.                         <table class="antropo_table">  
  18.                             <tr>  
  19.                                 <td class="col1" rowspan="3">A<br />B<br />C</td>  
  20.                                 <td class="col2">Text1</td>  
  21.                                 <td class="col3">123</td>  
  22.                             </tr>  
  23.                             <tr>  
  24.                                 <td class="col2">Text1</td>  
  25.                                 <td class="col3">123</td>  
  26.                             </tr>  
  27.                             <tr>  
  28.                                 <td class="col2">Text1</td>  
  29.                                 <td class="col3">123</td>  
  30.                             </tr>  
  31.                                 <td class="clear_cell" colspan="3"></td>  
  32.                             </tr>  
  33.                             <tr>  
  34.                                 <td class="col1" rowspan="3">A<br />B<br />C</td>  
  35.                                 <td class="col2">Text1</td>  
  36.                                 <td class="col3">123</td>  
  37.                             </tr>  
  38.                             <tr>  
  39.                                 <td class="col2">Text1</td>  
  40.                                 <td class="col3">123</td>  
  41.                             </tr>  
  42.                             <tr>  
  43.                                 <td class="col2">Text1</td>  
  44.                                 <td class="col3">123</td>  
  45.                             </tr>  
  46.                                 <td class="clear_cell" colspan="3"></td>  
  47.                             </tr>  
  48.                             <tr>  
  49.                                 <td class="col1" rowspan="3">A<br />B<br />C</td>  
  50.                                 <td class="col2">Text1</td>  
  51.                                 <td class="col3">123</td>  
  52.                             </tr>  
  53.                             <tr>  
  54.                                 <td class="col2">Text1</td>  
  55.                                 <td class="col3">123</td>  
  56.                             </tr>  
  57.                             <tr>  
  58.                                 <td class="col2">Text1</td>  
  59.                                 <td class="col3">123</td>  
  60.                             </tr>  
  61.                         </table>  
  62.                           
  63.                         <table class="antropo_repeat_table">  
  64.                             <tr>  
  65.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  66.                             </tr>  
  67.                             <tr>  
  68.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  69.                             </tr>  
  70.                             <tr>  
  71.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  72.                             </tr>  
  73.                             <tr>  
  74.                                 <td class="clear_cell"></td>  
  75.                             </tr>  
  76.                             <tr>  
  77.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  78.                             </tr>  
  79.                             <tr>  
  80.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  81.                             </tr>  
  82.                             <tr>  
  83.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  84.                             </tr>  
  85.                             <tr>  
  86.                                 <td class="clear_cell"></td>  
  87.                             </tr>  
  88.                             <tr>  
  89.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  90.                             </tr>  
  91.                             <tr>  
  92.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  93.                             </tr>  
  94.                             <tr>  
  95.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  96.                             </tr>  
  97.                         </table>  
  98.                           
  99.                         <table class="antropo_repeat_table">  
  100.                             <tr>  
  101.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  102.                             </tr>  
  103.                             <tr>  
  104.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  105.                             </tr>  
  106.                             <tr>  
  107.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  108.                             </tr>  
  109.                             <tr>  
  110.                                 <td class="clear_cell"></td>  
  111.                             </tr>  
  112.                             <tr>  
  113.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  114.                             </tr>  
  115.                             <tr>  
  116.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  117.                             </tr>  
  118.                             <tr>  
  119.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  120.                             </tr>  
  121.                             <tr>  
  122.                                 <td class="clear_cell"></td>  
  123.                             </tr>  
  124.                             <tr>  
  125.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  126.                             </tr>  
  127.                             <tr>  
  128.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  129.                             </tr>  
  130.                             <tr>  
  131.                                 <td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>  
  132.                             </tr>  
  133.                         </table>  
  134.                     </div>  
  135.                   
  136.                 </div>  
  137.             </div>  
  138.               
  139.         </div>  
  140.     </body>  
  141.   
  142. </html>