Table fixe avec en-tête et de la colonne sur pur css

Question

Table fixe avec en-tête et de la colonne sur pur css

Demandé el 4 de Avril, 2013: Quand la question a-t-elle été
51243 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

J'ai besoin de créer un tableau html (ou quelque chose de similaire à la recherche) avec un en-tête fixe et de fixe à la première colonne.

Chaque solution que j'ai vu jusqu'à présent utilise du javascript ou jQuery pour définir scrollTop/scrollLeft, mais il ne fonctionne pas correctement sur les navigateurs mobiles, donc je suis à la recherche d'un pur CSS solution.

J'ai trouvé une solution pour une colonne fixe ici: jsfiddle.net/C8Dtf/20/ mais je ne sais pas comment je peux l'améliorer pour faire de l'en-tête fixe trop.

Je veux qu'il fonctionne sur les navigateurs webkit ou utiliser du CSS3, mais je le répète, je ne veux pas utiliser le javascript pour le défilement.

EDIT: Ceci est un exemple de l'un comportement que je souhaite obtenir: http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

Demandé el 4 de Avril, 2013 par panfil

Answer 1

5 Réponses

Answer 2

15voto

Phillip-juan Points 338

Ce n'est pas un exploit facile.

Le lien suivant est un travail de démonstration:

Lien mis à Jour en fonction lanoxx commentaire

http://jsfiddle.net/C8Dtf/366/

N'oubliez pas d'ajouter ceux-ci:

<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>

je ne vois pas d'autre moyen d'y parvenir. Surtout pas à l'aide de css.

C'est beaucoup à passer. Espérons que cela aide :)

Répondu el 5 de Avril, 2013 par Phillip-juan (338 Points )

Answer 3

15voto

PretorianNZ Points 21

Toutes ces suggestions sont super et tout, mais ils sont seulement la fixation de l'en-tête ou une colonne, pas les deux, ou qu'ils sont à l'aide de javascript. La raison - il ne pas croire que cela peut être fait en pur CSS. La raison:

Si c'était possible de le faire, vous avez besoin d'imbriquer plusieurs défilement divs l'un dans l'autre, chacun avec un parchemin dans une direction différente. Ensuite, vous devez diviser votre tableau en trois parties - l'en-tête fixe, la colonne fixe et le reste des données.

Des beaux. Mais maintenant le problème - vous pouvez faire de l'un d'eux rester en place lorsque vous faites défiler, mais l'autre est imbriquée à l'intérieur de la zone de défilement de la première et est donc soumise à défilement de la vue elle-même, ne peut donc pas être fixé en place sur l'écran. "Ah-ha" vous dites "mais je peux en quelque sorte l'utilisation absolue ou à poste fixe pour le faire' - non, vous ne pouvez pas. Dès que vous faites cela, vous perdez la possibilité de faire défiler le conteneur. C'est une poule et de l'œuf - vous ne pouvez pas avoir les deux, elles s'annulent.

Je pense que la seule solution est l'aide de javascript. Vous devez séparer les trois éléments et de garder leurs positions dans la synchronisation à l'aide de javascript. Il y a des exemples dans d'autres messages sur cette page. Celui-ci est également vaut le coup d'oeil:

http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/

Répondu el 23 de Septembre, 2014 par PretorianNZ (21 Points )

Answer 4

9voto

Dyego.JhOu Points 61

Un exemple en utilisant uniquement CSS:

<html>
<head>
</head>
<style>

.table
{

table-layout:fixed;
width:500px;

border-collapse:collapse;

}

.header th
{

font-family:Calibri;
font-size:small;
font-weight:lighter;

border-left:1px solid #000;
background:#d0d0d0;

}

.body_panel
{

display:inline-block;
width:520px;
height:300px;
overflow-y:scroll;

}

.body tr
{

border-bottom:1px solid #d0d0d0;

}

.body td
{

border-left:1px solid #d0d0d0;
padding-left:3px;

font-family:Calibri;
font-size:small;

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

}

</style>
<body>

<table class="table">

<thead class="header">

<tr>
<th style="width:20%;">teste</th>
<th style="width:30%;">teste 2</th>
<th style="width:50%;">teste 3</th>
</tr>

</thead>
</table>

<div class="body_panel">

<table class="table">
<tbody class="body">

<tr>
<td style="width:20%;">asbkj k kajsb ksb kabkb</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>

</tbody>
</table>

</div>

</body>
</html>

Répondu el 16 de Octobre, 2013 par Dyego.JhOu (61 Points )

Answer 5

9voto

Phillip-juan Points 338

J'ai fait quelques changements dans jsfiddle. Cela pourrait être ce que vous essayez de faire.

http://jsfiddle.net/C8Dtf/81/

J'ai codé en dur les titres comme:

<table id="left_table" class="freeze_table">
    <tr class='tblTitle'>
         <th>Title 1</th>
         <th>Title 2</th>
    </tr>
</table>

Et j'ai ajouté quelques styles.

.tblTitle{
   position:absolute;
    top:0px;
    margin-bottom:30px;
    background:lightblue;
}
td, th{
    padding:5px;
    height:40px;
    width:40px;
    font-size:14px;
}

L'espoir c'est ce que vous voulez :)

Répondu el 4 de Avril, 2013 par Phillip-juan (338 Points )

Answer 6

0voto

Brad Janke Points 331

Quelque chose comme cela peut fonctionner pour vous... Il faudra probablement que vous avez défini les largeurs de colonne pour votre ligne d'en-tête.

thead { 
    position: fixed;
}

http://jsfiddle.net/vkhNC/

Mise à jour:

Je ne suis pas convaincu que l'exemple que vous avez donné est possible avec juste CSS. J'aimerais que quelqu'un me prouver le contraire. Voici ce que j'ai jusqu'à présent. Il n'est pas le produit fini, mais il pourrait être un début pour vous. J'espère que cela vous utile de direction, où que ce soit.

Répondu el 4 de Avril, 2013 par Brad Janke (331 Points )

Table fixe avec en-tête et de la colonne sur pur css

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Table fixe avec en-tête et de la colonne sur pur css

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: