web-dev-qa-db-ja.com

CSS-trの固定高さとテーブルの固定高さ？

高さが固定された行を持つテーブルが必要で、そのテーブル自体は高さが固定でなければなりません。たとえば、すべての行の高さは8ピクセルで、テーブルの高さは400ピクセルです。テーブルの全高さよりも行数が少ない場合、テーブルの残りの部分はギャップのようになります。

しかし、テーブルに固定の高さを設定すると、cssは行の高さを自動的に再調整します。

次のようなテーブルが必要です。

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

私はこれを試しました：

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>

または、ここで確認できます： https://jsfiddle.net/utrwqfux/

P.S。したがって、テーブルの高さを強制すると、行の高さは無視されます。最後のtrには高さがなかったため、空のギャップを自動的に埋めるようにサイズを変更するという考えでした。

htmlcssrowhtml-table
6
Andrius

height:8px最初と2番目のtrに。最後の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

私は、古いdivテーブルレイアウトを使用する場合と比較して、テーブル要素としてdivを表示するWart Claesに同意します。しかし、実行している問題は、ブラウザがtbody要素をテーブルに追加していることです。この要素は行の高さを強制しています。これを修正するには、2つの方法があります。

1）tbodyをブロックとして表示するように設定します。これにより、ブラウザーはその表示プロパティを無視し、希望どおりに動作します。

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

tbody{
  display:block;
}

2）tbodyを使用してテーブルの高さを設定します。

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

ただし、これを行うと、テーブルが希望どおりに400pxになりません。ただし、trは正確に8pxになります。

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

1
Benneb10

基本的に、HTMLではなくCSSでテーブルを作成することでこれを行いました。これはもう少し制御を与えます。

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;
}

ライブの例： http://codepen.io/WartClaes/pen/mVxdQg?editors=11

ここでの唯一の問題は、tdのコンテンツがそれよりも大きいため、8pxよりも高くなることです。 8pxは実際の高さですか？

1
Wart Claes