Zum simulieren von html-Tabellen-Zeile mit mehreren Spalten mit einem div?

Mache ich Webseite, wo die Daten einer Datenbank stehen in einer Tabelle. Jede Zeile besteht aus 3 Spalten. Ich möchte jede Zeile anklickbar, es ist jedoch nicht möglich, da Sie keine Kapseln eine Zeile in der Tabelle mit Anker. Es gibt einige Lösungen um, aber ich wollen, überspringen Sie diese tricks und verwenden divs, die als Zeilen. In jedem div, ich schwebte drei inline-block-divs, die als Spalten das gleiche Ergebnis zu erhalten. Aber gibt es eine Möglichkeit, zu vermeiden, 3-Spalten-wie divs in diesem Beispiel? Nur ein div für jede Zeile mit 3 text-Teile (Spalten, in der Tat) vertikal ausgerichtet, wie in einer normalen html-Tabelle? Ich habe verzweifelt versucht, in PHP str_pad und es löst ein anderes Problem.

  • Ich fürchte, das, was Sie fordern, Niederlagen der Zweck von div. Was ist Los in der mit 3 gefloateten divs?
  • Naja, mein Hauptziel ist die Einfachheit. Dies ist nur ein einfaches 3-Teil text, ich will einfach nur, um zu erfahren, ob es einen Weg gibt, oder nicht. Ich denke, es ist nicht möglich, da jeder Charakter hat verschiedene Breite, Sie sind nicht monospace...
  • Manchmal gibt es einen Grund, dass Sie sollten die Verwendung von Tabellen. Das sieht aus wie einer von Ihnen.
  • Sie können eine ganze Tabelle, Zeile in einem Anker. Das ist ein Nachteil, und ich es nicht mag. Dennoch, ich werde weiterhin verwenden Sie die Tabelle zusammen mit js&css-trick.
InformationsquelleAutor Mehmed | 2012-01-29
  1. 1

    Mehmed,
    Versuchen Sie, diese...

    [HTML]

    <div id="row1" class="rows">
 <div class="cols col1"></div>
 <div class="cols col2"></div>
 <div class="cols col3"></div>
 <div class="cleaner"></div>
</div><!--end row1-->

<div id="row2" class="rows rowsAlt">
 <div class="col1"></div>
 <div class="col2"></div>
 <div class="col3"></div>
 <div class="cleaner"></div>
</div><!--end row2-->

    [CSS]

    .cleaner{clear: left; line-height: 0; height: 0;} 
.rows{width: 300px; min-height: 25px;}
.rowsAlt{background-color: blue;}

.cols{height: 100%; float: left;}
.col1{width: 25px;}
.col2{width: 50px;}
.col3{width: 100px;}

    Dann in JQuery können Sie nur ein click-Ereignis auf die Zeilen der Klasse und bekommen es ID traverse durch Kind-Elemente. Dies macht die gesamte Zeile klickbar. Sie können auch tun, irgendwas mit den Spalten, wenn Sie möchten.

    [JQuery]

    $('.rows').live("click", function(){ 
  var thisID = $(this).attr('id');

  alert(thisID);
  //now that you have the id, you can traverse that specific row
});

    Sollte dies ein guter start für Sie, Mehmed...

    • Danke, ich bin bereits mit dieser Lösung und es ist der beste Ansatz, den ich denke...
    InformationsquelleAutor sreyaNotfilc
Schreibe einen Kommentar