How to use max height in a tbody?

Question

How to use max height in a tbody?

Navigation

#1 by (2 votes)

1

I am trying to make a tbody have a maximum height and the content that has to be scroll , but I do not finish it.

The problem is that when I put the display block the whole content of the tbody goes to the first td and the idea is to keep the size of the cells and their place and scroll only in height.

Is there any way to do it?

I tried to put a div but then I'm going to walk the content and does not match the position of the table.

Here is a functional example of how I did it:

.scroll {
  display: block;
  height: 100px;
  overflow-y: scroll;
}

<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="1"></td>
      <td><input type="text" name="2"></td>
      <td><input type="text" name="3"></td>
      <td><input type="text" name="4"></td>
      <td><input type="text" name="5"></td>
      <td><input type="text" name="6"></td>
    </tr>
  </tbody>

  <tbody class="scroll">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

css3 css

asked by Killpe 26.01.2018 в 19:18

source

1 answer

Array only prints last record how to do show. () to more than one class at a time

score 2 · Accepted Answer

A solution using only CSS and with fixed width columns could be this:

table.scroll {
  width: 522px; /* 100px * 5 columnas + 22px ancho scrollbar */
  border-spacing: 0;
  border: 2px solid black;
}

table.scroll tbody,
table.scroll thead tr {
  display: block;
}

table.scroll tbody.wrapper {
  max-height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}

table.scroll tbody td,
table.scroll thead th {
  width: 100px;
  border-right: 1px solid black;
}

table.scroll thead th:last-child,
table.scroll tbody:not(.wrapper) td:last-child{
    width: 122px; /* 100px + 22px ancho scrollbar */
}

table.scroll tbody td input {
  box-sizing: border-box;
  width: 100%;
}

<table class="scroll">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="1"></td>
      <td><input type="text" name="2"></td>
      <td><input type="text" name="3"></td>
      <td><input type="text" name="4"></td>
      <td><input type="text" name="5"></td>
      <td><input type="text" name="6"></td>
    </tr>
  </tbody>

  <tbody class="wrapper">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

Reference: Related answer SOen