3

I have a table that I want to limit the height of to 200px and display a vertical scroll bar if the height of the table is greater than that.

Searching on SO, I found this thread with this fiddle.

I applied the css to my files and added the class name scroll to the table.

Unfortunately, the table does not expand to fill the width of the display.

How do I overcome this?

I have tried many things, but I am out of ideas. Giving the table.scroll css class a width: 100%; distorts the columns!

Here is my css code that I took from the thread/fiddle:

table.scroll {
    /*text-align: center;*/
    margin: auto;
    margin-top: 20px;
}
table.scroll, table.scroll td, table.scroll th {
    border: 1px solid #8c8c8c;
}
table.scroll th {
    /*width: 100%;*/
}
table.scroll thead {
    display: block;
}
table.scroll tbody {
    display: block;
    max-height: 200px;
    overflow-y: scroll;
}
table.scroll thead th, table.scroll tbody td {
    width: 70px;
}

The above css interacts with the table css I have for other tables on the test page:

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9
}
.table-striped>tbody>tr:nth-of-type(even) {
    background-color: #fff
}
.table-hover>tbody>tr:hover {
    background-color: #f5f5f5
}
table.tablesorter thead tr .header {
    cursor: pointer;
    cursor: hand;
    z-index: 1; /* used for placing the header behind the drop down menu */
}
table.tablesorter thead tr .header .arrow {
    width: 25px;
    height: 10px;
    display: inline-block;
    background: url(../img/tablesorter/whi-bg.gif) no-repeat center left
}
table.tablesorter thead tr .headerSortUp .arrow {
    background: url(../img/tablesorter/whi-asc.gif)
}
table.tablesorter thead tr .headerSortDown .arrow {
    background: url(../img/tablesorter/whi-desc.gif)
}
.table-no-bottom-margin {
    margin-bottom: -20px !important;
}

This is the html table line of code for the srolling table:

<table id="resumes_saved_metadata_details_table" class="scroll table table-bordered table-striped table-hover table-condensed tablesorter table-no-bottom-margin">

This is what the table looks like with out the vertical scroll bar. This is how I would like the table columns displayed:

enter image description here

This is the current display of the table:

enter image description here

Community
  • 1
  • 1
user1261774
  • 3,525
  • 10
  • 55
  • 103

0 Answers0