0

I am facing a issue with assigning height to the table.

I have a main container called table-container for which i have assigned the height width as 100%.

but at table level I have class called table100 to which i assigned height 40% of 100% but still the whole table content is assigned 100% table is occupying whole body which is not correct.

Please help me with this.

.table-container{
    text-align: center;
    justify-content: center;
    margin-top: 10px;
    width:100%;
    height:100%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  font-weight: unset;

  text-align: left;
}

.column1 {
  width: 25%;
  padding-left: 40px;
}

.column2 {
  width: 20%;
}

.column3 {
  width: 20%;
}

.column4 {
  width: 20%;
}


.table100-head th {
  padding-top: 10px;
  padding-bottom: 10px;
}

.table100-body td {
  padding-top: 16px;
  padding-bottom: 16px;
}

/*==================================================================
[ Fix header ]*/
.table100 {
  margin-top: 10px;
  position: relative;
  padding-top: 60px;
  background-color: #fff;
  height:40%; 

}


.table100-head {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.table100-body {
  overflow: auto;
}
.table100.ver2 .table100-head {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
}

.table100.ver2 th {
  font-family: Lato-Bold;
  font-size: 18px;
  color: #fa4251;
  line-height: 1.4;

  background-color: transparent;
}

.table100.ver2 td {
  font-family: Lato-Regular;
  font-size: 15px;
  color: #808080;
  line-height: 1.4;
}

.table100.ver2 .table100-body tr {
  border-bottom: 1px solid #f2f2f2;
}

/*---------------------------------------------*/

.table100.ver2 {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
}


/* scrollbar body */
.js-pscroll {
  position: relative;
  overflow: scroll;
}
<div class="row table-container">
  <div class="col-sm-12 column-container">
    <div class="tab-content">
        <div class="table100 ver2 m-b-110">
          <div class="table100-head">
              <table>
                  <thead>
                      <tr class="row100 head">
                          <th class="cell100 column1">Name</th>
                          <th class="cell100 column2">Date</th>
                          <th class="cell100 column3">Type</th>
                          <th class="cell100 column4">Status</th>
                      </tr>
                  </thead>
              </table>
          </div>

       <div class="table100-body js-pscroll">
              <table>
                  <tbody>
                      <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>

                  <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>

                  <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>

                  <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>

                  <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>

                  <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>

                  <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>

                  <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>

                  <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>

                  <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>

                  <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>

                  <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>

                  <tr class="row100 body">
                      <td class="cell100 column1">kavya</td>
                      <td class="cell100 column2">08-09-2020</td>
                      <td class="cell100 column3">Datamodel</td>
                      <td class="cell100 column4">completed</td>
                  </tr>
              </tbody>
              </table>
          </div>
        </div>
      </div>
  </div>
</div>
Rayees AC
  • 4,426
  • 3
  • 8
  • 31
kavya
  • 325
  • 2
  • 10
  • try deleting width: 100%; in table – Shalomi90 Sep 11 '20 at 06:05
  • @Shalomi11 table height and width is still the same ..How can I change table height and width? – kavya Sep 11 '20 at 06:08
  • By default height of an element is adjusted based on the content. If you like to specify height then use `height: 50vh`. See this for info https://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work – Purushothaman Sep 11 '20 at 06:12
  • @Purushothaman okay.what is the difference between vh and %? – kavya Sep 11 '20 at 06:20
  • @kavya The percentage value reacts to the parent element, where as vh (viewport height) reacts to the viewport. 1vh is equal to 1% of the viewport. Viewport is the area visible to the user. – Purushothaman Sep 11 '20 at 06:27
  • Add some height to div.tab-content in px or whatever instead % like below. Then, the class table100 will automatically consume 40% from the specified height.
    – krthi_66 Sep 11 '20 at 06:28

0 Answers0