web-dev-qa-db-fra.com

CSS - hauteur fixe sur le tr et hauteur fixe sur la table?

Je dois avoir une table qui a des rangées avec une hauteur fixe et cette table elle-même doit avoir une hauteur fixe. Par exemple, toutes les lignes auraient une hauteur de 8 px et la table, une hauteur de 400 px. S'il y a moins de lignes que la hauteur totale de la table, la partie restante de la table doit ressembler à un espace.

Mais css réajuste automatiquement la hauteur des lignes si je règle une hauteur fixe sur la table.

J'ai besoin d'une table pour ressembler à ceci:

|row  |cont  |
|row  |cont  |
|row  |cont  |
|            |
|            |
|            |
|End of table|

J'ai essayé ceci:

CSS:

.t-table {
  border: 1px solid black;
  height: 400px;
  border-collapse: collapse;
}
td {
  border: 1px solid black;
}

HTML:

<table class="t-table">
<tr style="line-height: 8px">
  <td>A</td>
  <td>B</td>
</tr>
<tr style="line-height: 8px">
  <td>1</td>
  <td>2</td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
</table>

Ou vous pouvez le vérifier ici: https://jsfiddle.net/utrwqfux/

P.S. Donc, si je force la hauteur sur la table, il ignorera la hauteur sur les lignes. Last tr était sans hauteur, donc l’idée était de le redimensionner automatiquement en remplissant les espaces vides.

htmlcssrowhtml-table
5
Andrius

Vous pouvez définir height:8px sur les première et seconde tr. Et supprimez la bordure du milieu des cellules vides de la dernière tr.

.t-table {
  border: 1px solid black;
  height: 400px;
  border-collapse: collapse;
}
.t-table td {
  border: 1px solid black;
}
.t-table td:empty {
  border-left: 0;
  border-right: 0;
}
<table class="t-table">
  <tr style="line-height: 8px; height: 8px;">
    <td>A</td>
    <td>B</td>
  </tr>
  <tr style="line-height: 8px; height: 8px;">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

1
Stickers

Fondamentalement, je l’ai fait en créant la table en CSS et non en HTML. Cela donne un peu plus de contrôle.

HTML: 

<div class="table">
    <div class="tr">
        <div class="td">A</div>
        <div class="td">B</div>
    </div>
    <div class="tr">
        <div class="td">1</div>
        <div class="td">2</div>
    </div>
</div>

CSS: 

.table {
    background: rebeccapurple;
    display: table;
    height: 400px;
    table-layout: fixed;
    width: 400px;
}

.td {
    background: hotpink;
    display: table-cell;
    height: 8px;
    width: 200px;
}

Exemple en direct: http://codepen.io/WartClaes/pen/mVxdQg?editors=1100

Le seul problème ici est que les tds seront plus élevés que 8px puisque leur contenu est plus grand que cela. Est-ce que 8px est la hauteur réelle?

1
Wart Claes

Je suis d'accord avec Wart Claes sur l'affichage divs comme éléments de table vs en utilisant l'ancienne disposition de la table de l'école. Mais le problème que vous rencontrez est que le navigateur ajoute un élément tbody à votre table. Cet élément force la hauteur de la ligne. Pour résoudre ce problème, il y a deux façons. 

1) Configurez le tbody pour qu’il s’affiche en tant que bloc, le navigateur ignorera ses propriétés d’affichage et le fera exactement comme vous le souhaitez.

https://jsfiddle.net/benneb10/utrwqfux/1/

tbody{
  display:block;
}

2) Définissez la hauteur de la table avec le tbody:

tbody{
  height:400px;
  overflow:auto;
  overflow-x:hidden;
  border: 1px solid black;
}

Cependant, cela ne fera pas de votre table 400px comme vous le souhaitez. Cela forcera le tr à être exactement 8px cependant.

https://jsfiddle.net/benneb10/utrwqfux/2/

0
Benneb10