Как установить высоту тела с помощью прокрутки переполнения

я столкнулся с проблемой при установке высоты tbody ширина переполнения прокрутки. 



<style> 

     tbody{

       height:50px;display:block;overflow:scroll

     }

   </style>



       <h3>Table B</h3>

    <table style="border: 1px solid red;width:300px;display:block">

        <thead>

            <tr>

                <td>Name</td>

                <td>phone</td>

            </tr>

        </thead>

        <tbody style='height:50px;display:block;overflow:scroll'>

            <tr>

                <td>AAAA</td>

                <td>323232</td>

            </tr>

            <tr>

                <td>BBBBB</td>

                <td>323232</td>

            </tr>

            <tr>

                <td>CCCCC</td>

                <td>3435656</td>

            </tr>

        </tbody>

    </table>


посетите мою скрипку здесь



Я хочу таблицу B, как таблица A с переполнением прокрутки.



любая помощь будет оценили.



Большое Спасибо,
М.

436   9  

9 ответов:

если вы хотите tbody чтобы показать свиток , превратите его в block.

сохранить поведение table повернуть tr на table.

для равномерного распыления клеток используйте table-layout:fixed;

демоtbody scroll

CSS для вашего HTML теста:

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

если tbody не показывает прокрутку, потому что содержимое меньше, чем height или max-height установите свиток в любое время с : overflow-y:scroll;. демо-2

135  
2014-06-02 11:30:59

Это простой способ использовать полосу прокрутки в таблицу тела

/* It is simple way to use scroll bar to table body*/

.tableBodyScroll tbody {
  display: block;
  max-height: 300px;
  overflow-y: scroll;
}

.tableBodyScroll thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
<table class="tableBodyScroll">
  <thead>
    <th>Invoice Number</th>
    <th>Purchaser</th>
    <th>Invoice Amount</th>
    <th>Invoice Date</th>
  </thead>
  <tbody>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>0</td>
      <td>01/12/2017</td>
    </tr>
  </tbody>
</table>
25  
2018-08-02 21:27:16

по умолчанию overflow не применяется к элементам группы таблиц, если вы не даете display:block до <tbody> также вы должны дать position:relative и display: block до <thead>. Проверьте демо.

.fixed {
  width:350px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed th {
  text-decoration: underline;
}
.fixed th,
.fixed td {
  padding: 5px;
  text-align: left;
  min-width: 200px;
}


.fixed thead {
  background-color: red;
  color: #fdfdfd;
}
.fixed thead tr {
  display: block;
  position: relative;
}
.fixed tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
  overflow-y: scroll;
    overflow-x: hidden;
}
9  
2016-08-04 14:06:25

измените свой второй код таблицы, как показано ниже.

<table style="border: 1px solid red;width:300px;display:block;">
<thead>
    <tr>
        <td width=150>Name</td>
        <td width=150>phone</td>
    </tr>
</thead>
<tbody style='height:50px;overflow:auto;display:block;width:317px;'>
    <tr>
        <td width=150>AAAA</td>
        <td width=150>323232</td>
    </tr>
    <tr>
        <td>BBBBB</td>
        <td>323232</td>
    </tr>
    <tr>
        <td>CCCCC</td>
        <td>3435656</td>
    </tr>
</tbody>
</table>

JSFIDDLE DEMO

1  
2014-06-02 10:54:11

Я думаю, что вы пытаетесь сделать, это сохранить заголовок фиксированной и для прокрутки текста. Вы можете прокручивать содержимое в 2 направлениях:

  • горизонтально: вы не сможете прокручивать содержимое по горизонтали, если не используете ползунок (например, ползунок jQuery). Я бы рекомендовал избегать использования таблицы в этом случае.
  • вертикально: вы не сможете достичь этого с помощью tbody - тег, потому что назначение display:block или display:inline-block сломает макет стола.

вот решение с помощью divs:JSFiddle

HTML:

<div class="wrap_header">
    <div class="column">
        Name
    </div>
    <div class="column">
        Phone
    </div>
    <div class="clearfix"></div>
</div>
<div class="wrap_body">
    <div class="sliding_wrapper">
        <div class="serie">
            <div class="cell">
                AAAAAA
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                BBBBBB
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                CCCCCC
            </div>
            <div class="cell">
                3435656
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

CSS:

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
.sliding_wrapper {overflow-y:scroll; overflow-x:none;}
.sliding_wrapper,
.wrap_body {height:45px;}
.wrap_header,
.wrap_body {overflow:hidden;}
.column {width:100px; float:left; border:1px solid red;}
.cell {width:100px; float:left; border:1px solid red;}

/**
 * @info Clearfix: clear all the floated elements
 */
.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clearfix {display:inline-table;}

/**
 * @hack Display the Clearfix as a block element
 * @hackfor Every browser except IE for Macintosh
 */
    /* Hides from IE-mac \*/
    * html .clearfix {height:1%;}
    .clearfix {display:block;}
    /* End hide from IE-mac */

объяснение:

у вас sliding wrapper, который будет содержать все данные.

обратите внимание на следующее:

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}

есть разница в 17px, потому что нам нужно учитывать ширину полосы прокрутки.

0  
2014-06-02 11:19:44

Webkit, кажется, использует внутренне display: table-row-group на tbody тег. В настоящее время существует ошибка с установкой высоты к нему:https://github.com/w3c/csswg-drafts/issues/476

будем надеяться, что это будет решена в ближайшее время.

0  
2018-02-27 16:57:59

в моем случае я хотел иметь отзывчивую высоту таблицы вместо фиксированной высоты в пикселях, как показывают другие ответы. Для этого я использовал свойство percentage of visible height и overflow на div, содержащем таблицу:

&__table-container {
  height: 70vh;
  overflow: scroll;
}

таким образом, таблица будет расширяться вместе с изменением размера окна.

0  
2018-03-12 12:00:38

HTML:

<table id="uniquetable">
    <thead>
      <tr>
        <th> {{ field[0].key }} </th>
        <th> {{ field[1].key }} </th>
        <th> {{ field[2].key }} </th>
        <th> {{ field[3].key }} </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="obj in objects" v-bind:key="obj.id">
        <td> {{ obj.id }} </td>
        <td> {{ obj.name }} </td>
        <td> {{ obj.age }} </td>
        <td> {{ obj.gender }} </td>
      </tr>
    </tbody>
</table>

CSS:

#uniquetable thead{
    display:block;
    width: 100%;
}
#uniquetable tbody{
    display:block;
    width: 100%;
    height: 100px;
    overflow-y:overlay;
    overflow-x:hidden;
}
#uniquetable tbody tr,#uniquetable thead tr{
    width: 100%;
    display:table;
}
#uniquetable tbody tr td, #uniquetable thead tr th{
   display:table-cell;
   width:20% !important;
   overflow:hidden;
}

это тоже будет работать:

#uniquetable tbody {
    width:inherit !important;
    display:block;
    max-height: 400px;
    overflow-y:overlay;
  }
  #uniquetable thead {
    width:inherit !important;
    display:block;
  }
  #uniquetable tbody tr, #uniquetable thead tr {
    display:inline-flex;
    width:100%;
  }
  #uniquetable tbody tr td,  #uniquetable thead tr th {
    display:block;
    width:20%;
    border-top:none;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height:400px;
  }
0  
2018-09-06 12:33:45

самое простое из всех решений:

добавить ниже код в CSS:

.tableClassName tbody {
  display: block;
  max-height: 200px;
  overflow-y: scroll;
}

.tableClassName thead,tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.tableClassName thead {
  width: calc( 100% - 1.1em );
}

1.1 em - средняя ширина полосы прокрутки, пожалуйста, измените его, если необходимо.

0  
2018-09-18 14:11:55

Comments

    Ничего не найдено.
Click here to cancel reply.