Limiter la largeur et la hauteur d'un div dans un tableau

Question

Limiter la largeur et la hauteur d'un div dans un tableau

Demandé el 7 de Août, 2011: Quand la question a-t-elle été
783 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Dans le HTML ci-dessous, je suis confronté à deux problèmes :

La chaîne aléatoire générée ne tient pas dans la largeur de 15% du td. Je ne sais pas comment faire pour qu'un div ait la largeur maximale de son td parent (dans ce cas, 15 % de la largeur de l'écran et une chaîne de caractères aléatoire générée). min-width de 200px )
Je ne suis pas sûr du pourcentage de hauteur à donner. #row2 parce que si je veux que l'ensemble du tableau ait une hauteur/largeur de 100% (et #row1 pour être un peu plus grand que #row2 - par exemple 60 / 40), mais je veux que #row2 pour être fixé à un height de 20px .

<html> <head> <script language="javascript" type="text/javascript"> function randomString(string_length) { var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; var randomstring = ''; for (var i=0; i<string_length; i++) { var rnum = Math.floor(Math.random() * chars.length); randomstring += chars.substring(rnum,rnum+1); } return randomstring; } function FillData(){ document.getElementById("query_div").innerHTML = randomString(1000); document.getElementById("box1_div").innerHTML = randomString(1000); } </script>

<style type="text/css">

global_table{
```
/*max-height: 300;
max-width: 500;
table-layout:fixed;*/
min-height:500px;
/*height:100%;*/
width:100%;
max-height:1500px;
```
}

col1{
```
min-width:200px;
width:15%;
```
}

col2{
```
min-width:200px;
width:20%;
```
}

col3{
```
min-width:200px;
width:25%;
```
}

col4{
```
min-width:200px;
width:15%;
```
}

col5{
```
min-width:200px;
width:25%;
```
}

row1{
```
/*max-height:400px;*/
height:200px;
overflow: hidden;
/*
height:50%;
*/
```
}

row2{
```
height:300px;
/*
max-height:20px;
height:5%;
*/
```
}

row3{
```
height:300px;
/*
max-height:200px;
min-height:400px;
*/
/*
height:45%;
*/
```
}

left_box{

}

query_div{
```
overflow: hidden;
word-break: break-all;
height: 1em; /* I don't know if you want whis */
```
}

box1_div{
```
overflow: hidden;
word-break: break-all;
height: 1em;
```
} .hidden{ height:0px; /visibility:hidden;/ } </style>
</head> <body onload="FillData()"> <table id="global_table" border="2">  <tr class="hidden"> <td id="col1" class="hidden"> <td id="col2" class="hidden"> <td id="col3" class="hidden"> <td id="col4" class="hidden"> <td id="col5" class="hidden"> </tr>

<tr id="row1"> <td id="left_box" rowspan="3"><div id="query_div">Test</div></td> <td><div id="box1_div">Box 1</div></td> <td colspan="2"><div id="box2_div">Box 2</div></td> <td><div id="box3_div">Box 3</div></td> </tr> <tr id="row2"> <td rowspan="2" colspan="2"><div id="box4_div">Box 4</div></td> <td colspan="2"><div id="box4_div">Box 5</div></td> </tr> <tr id="row3"> <td colspan="2"><div id="box6_div">Box 6</div></td> </tr> </table> </body> </html>

Demandé el 7 de Août, 2011 par aerain

Answer 1

2 Réponses

Answer 2

1voto

NGLN Points 25671

Peut-être que c'est ce que vous cherchez, voir violon de démonstration .

Question 1)

#query_div{
    overflow: hidden;
    word-break: break-all;
    height: 1em; /* I don't know if you want whis */
}

Question 2)

#row2{
    height: 20px;
}

Répondu el 7 de Août, 2011 par NGLN (25671 Points )

Answer 3

0voto

Zhenya Points 205

EDITED

Je doute que cela réponde à toutes vos exigences, mais j'espère que cela vous mettra sur la bonne voie.
Jouez avec elle ici : http://jsfiddle.net/9965G/

ou et l'ensemble du code :

<!DOCTYPE HTML>
<html>
<head>
<script language="javascript" type="text/javascript">
  function randomString(string_length) {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    return randomstring;
  }
  function FillData(){
    document.getElementById("query_div").innerHTML = randomString(1000);
  }
</script>

<style type="text/css">
  #global_table{
    height:100%;
    width:100%;
    max-height:1500px;
  }
  #col1{
  }
  #col2{
    min-width:200px;
    width:20%;
  }
  #col3{
    min-width:200px;
    width:25%;
  }
  #col4{
    min-width:200px;
    width:15%;
  }
  #col5{
    min-width:200px;
    width:25%;
  }
  #row1{
    height:30px;
  }
  #row2{
    height:20px;
  }
  #row3{
    /*min-height:200px;
    height:45%;*/
  }
  #left_box{
    max-width: 200px;
    width: 15%;
  }
  #query_div{
    overflow:hidden;
    word-wrap: break-word;
  }
  td {
    min-width: 200px;
  }
</style>  
</head>
<body onload="FillData()">
<table id="global_table" border="2">
  <colgroup>
    <col id="col1"/>
    <col id="col2"/>
    <col id="col3"/>
    <col id="col4"/>
    <col id="col5"/>
  </colgroup>
  <tr id="row1">
    <td id="left_box" rowspan="3"><div id="query_div">Test</div></td>
    <td><div id="box1_div">Box 1</div></td>
    <td colspan="2"><div id="box2_div">Box 2</div></td>
    <td><div id="box3_div">Box 3</div></td>
  </tr>
  <tr id="row2">
    <td rowspan="2" colspan="2"><div id="box4_div">Box 4</div></td>
    <td colspan="2"><div id="box4_div">Box 5</div></td>
  </tr>
  <tr id="row3">
    <td colspan="2"><div id="box6_div">Box 6</div></td>
  </tr>
</table>
</body>
</html>

Note :
1. J'ai déplacé les props css de col1 vers la boîte gauche
2. il est dit max-width: 200 et width: 15% . Cependant, il agit comme si j'avais dit min-width: 200 C'est ce qu'il semble. Je ne peux pas expliquer. Vérifiez dans firebug. J'imagine qu'utiliser le pourcentage et les pixels ensemble peut causer des problèmes... peut-être autre chose.
3. si vous voulez row2 pour être fixé à 20px, il suffit de dire width: 20px; si vous voulez avoir row1/row2 = 60/40 cela signifie que vous devez juste donner raw1 width: 30px .
4. avoir de la hauteur pour row3 hauteur de mess pour row1 et row2 . Je l'ai enlevé.
5. J'ai en fait très peu d'expérience avec les tableaux... J'essaie de les éviter. Oui, les tableaux sont censés fonctionner pour les données tabulaires... mais bonne chance avec ça quand c'est moins trivial. Je préfère utiliser des divs et des js supplémentaires si nécessaire plutôt que d'essayer d'optimiser un tableau.

Répondu el 7 de Août, 2011 par Zhenya (205 Points )

Limiter la largeur et la hauteur d'un div dans un tableau

global_table{

col1{

col2{

col3{

col4{

col5{

row1{

row2{

row3{

left_box{

query_div{

box1_div{

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Limiter la largeur et la hauteur d'un div dans un tableau

global_table{

col1{

col2{

col3{

col4{

col5{

row1{

row2{

row3{

left_box{

query_div{

box1_div{

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: