Veebitreimine: kuidas luua tabelisse keritavaid veerge?

Question

Mul on loomisel veebirakendus, mis peab sisaldama ülaosas liikumatut bännerit ja all mitu veergu teksti. Veergude arv võib muutuda ja igas veerus on iseseisev tekst. Välja peab see nägema nii nagu järgmine improviseeritud vorm:

veerud

Töötava näidise leiab siit.

Kasutasin veergude loomiseks HTML-tabelit, kuid seisan nüüd probleemi ees, kuidas sundida tabeli lahtreid keritavaks, kui tekst läheb pikemaks kui akna mõõdud, eesmärk oleks see, et tabeli füüsilised mõõdud püsiksid akna mõõtmetes ja igale lahtrile eraldi tekiksid kerimisribad. Hea, kui lahendus jääks CSSi tasemele, vajadusel olen nõus kasutama javascripti.

Lahendus võib peituda järgmiste omadustega mängimisel:

        TABLE {
            height:100%;
            width:100%;
            max-height:100%;
            }
        TD {
            max-height:100%;
            overflow:auto;
        }

Siiani ei ole ma suutnud sellist efekti luua, kogu tabel jääb kangekaelselt ühte tükki ja mõõtmed kasvavad akna kõrgusest välja.

Accepted Answer

Pean uue vastuse kirjutama, sest kommentaar on piirangutega.

Kirjutan ise kõik selles vaimus, et tabeleid kujunduseks ei kasutata. Saad seda siiski teha kui paned iga td sisse div-i, millel on kindel kõrgus (ehk siis tabeli kõrgus jääb sisuliselt dünaamiliseks, aga div-ide pealt vaatab ta, et kõrgemaks ma ennast enam ei tee kui neil vaja).

css:

table { position: relative; top: 3em; left: 0; right: 0; }
td div { overflow: auto; min-width: 250px; height: 400px; }

html:

<table><tr>
  <td><div>...</div></td>
  <td><div>...</div></td>
  <td><div>...</div></td>
  <td><div>...</div></td>
</tr></table>

Mul kahjuks endal puudub igasugune kogemus mobiili device-dega. Ja probleem on div-i kõrguse saamisega. Mina ei tea meetodit CSS2-ga (IE-l on mingi expression, aga see pole "päris"). Seega tegin ühe katse JavaScriptiga ja sain käima. Kood on erinevate brauserite pärast suhteliselt jube:

onload = onresize = function () {
  var cssNode, d, height, sheet;
  cssNode = document.getElementById('dynamic');
  d = document;
  height = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight || 800;

  // compatibility
  sheet = cssNode.sheet || cssNode.styleSheet;
  if (!sheet.rules) sheet.rules = sheet.cssRules;
  if (!sheet.deleteRule) sheet.deleteRule = sheet.removeRule;
  if (!sheet.addRule) sheet.addRule =
      function (sel, rule, pos) { this.insertRule(sel + ' { ' + rule + ' } ', pos) }

  if (sheet.rules.length) sheet.deleteRule(0);
  sheet.addRule('td div', 'height: ' + (height - 100) + 'px');
}

Panin kõik kokku ja end dropbox-i kaudu laadisin üles: http://dl.dropbox.com/u/6971378/cols.html

Answer 2

Tabeli kõrguste arvutus on segadust tekitav ja kahtlane (standardid on ka selle koha pealt lahtisi otsi jätvad). Tee div-idega tabeli struktuuri sarnaselt.

<div class="cols"><div>...</div><div>...</div><div>...</div><div>...</div></div>

Ja CSS-i kirjuta:

.cols { top 3em; bottom: 0; position: absolute; left: 0; right: 0; }
.cols > div { float: left; width: 25%; height: 100%; overflow-y: auto; }

Siin võib probleem tekkida ".cols > div" selektoriga kui teed veebi kõigile (vanad IE-d jms). Samuti pead päris palju mängima selle 25% kui tahad bordereid lisada jms.

Muuseas -- minu arust on hea trikk css-s määrata reegel "* {margin: 0; padding: 0; border: 0 none; }". See tähendab, et mitte ühelgi elemendil ei ole määratud mingeid bordereid ja asju. See muidugi eeldab, et pead neid mõnes kohas tagasi hakkama määrama (nagu input element, textarea jt). Samas annab see koheselt tugeva kontrolli paigutuste üle erinevate brauserite puhul ja teeb css-i debugimise lihtsamaks.

Answer 3

0	overflow-x: auto; või overflow: auto; link vastatud Jul 26 '12 at 14:52 Arvi 31●3

Veebitreimine: kuidas luua tabelisse keritavaid veerge?

Jälgi seda küsimust

Pinu tööpakkumised

Sarnased küsimused