Solution 1 :

Couple of things:

  1. You have already defined 8px of padding under #dvStockCard table td{...} that’s why you had default padding for all. Considering you need that padding I have overridden the td padding for last row.
  2. Use border-collapse: collapse; for the row and padding & margin to 0 for td. Now you can use your desired height for that row.
#dvStockCard {
  border-style: solid;
  border-width: thin;
  padding: 12px 5px 5px 5px;
}

.title {
  font-size: small;
  border-top: 2px solid #686868;
  color: #383838;
  padding: 8px calc(100% - 10ch) 0px 0px;
}


/*----table styles----*/

#dvStockCard table {
  font-family: sans-serif;
  font-weight: 600;
  border-collapse: collapse;
  width: 100%;
  font-size: x-small;
}

#dvStockCard table tr {
  border-bottom: 2px solid lightgray;
  color: #707070;
}

#dvStockCard table td {
  padding: 8px;
}

#dvStockCard table tr td:nth-child(2) {
  text-align: right;
}


/*------values styles------*/

.val {
  font-size: small;
  color: black;
}

#lastPrice {
  font-family: 'Palatino Linotype';
  font-size: 160%;
  color: black;
}

#change {
  font-family: 'Palatino Linotype';
  font-size: 160%;
  color: green;
}

.halfWidth {
  position: relative;
  ;
  width: 50%;
}


/*-------helpers styles--------*/

.spaceTop-10 {
  margin-top: 10px
}

.spaceBottom-10 {
  margin-bottom: 10px
}

.trClass {
  border-collapse: collapse;
}

.trClass td {
  height: 40px;
  padding: 0 !important;
  /* need this because you already used 8px to the td*/
  margin: 0 !important;
  /* need this because you already used 8px to the td*/
}

.fullWidth {
  width: 100%;
}

.fullHeight {
  height: 100%;
}
<div id="dvStockCard">
  <div class="title spaceBottom-10">My data cart</div>
  <table>
    <tr>
      <td id="lastPrice">no price</td>
      <td id="change">1234324t</td>
    </tr>
    <tr>
      <td>Range</td>
      <td id="range" class="val">No Rnge</td>
    </tr>
    <tr>
      <td>Open</td>
      <td id="open" class="val">555</td>
    </tr>
    <tr>
      <td>Volume</td>
      <td id="volume" class="val">DM</td>
    </tr>
    <tr>
      <td>Market Cap</td>
      <td id="marketCap" class="val">Non</td>
    </tr>
    <tr>
      <td></td>
      <td id="timestamp">As of 12:00 AM</td>
    </tr>

    <tr class="trClass">
      <td style="width:50%;"><input type="text" class="fullWidth fullHeight"></td>
      <td style="width:50%"><input type="button" value="Get" class="fullWidth fullHeight"></td>
    </tr>

  </table>
</div>

Solution 2 :

You could try wrapping it up in a container and later set it to 100% height. If not, you could try setting the height in px, you go trying different measurements until you see which one fills your desire. I hope I could help you

Problem :

I have table and inside this table button and textbox.

Here the code:

#dvStockCard{
  border-style: solid;
  border-width: thin; 
  padding: 12px 5px 5px 5px;
}

.title {
  font-size: small;
  border-top: 2px solid #686868;
  color:#383838;
  padding: 8px calc(100% - 10ch) 0px 0px;
}

/*----table styles----*/
#dvStockCard table{
  font-family:  sans-serif;
  font-weight: 600;
  border-collapse: collapse;
  width: 100%;
  font-size: x-small;  
}

#dvStockCard table tr{
  border-bottom: 2px solid lightgray;
  color: #707070;
}

#dvStockCard table td {
  padding: 8px;
}

#dvStockCard table tr td:nth-child(2) {
 text-align: right;
}

/*------values styles------*/
.val{
  font-size: small; 
  color: black;
}

#lastPrice{
  font-family: 'Palatino Linotype';
  font-size: 160%; 
  color:black;
}

 #change{
  font-family: 'Palatino Linotype';
  font-size: 160%;  
  color:green;
}

.halfWidth{
  position: relative;;
  width:50%;
}

/*-------helpers styles--------*/
.spaceTop-10{
    margin-top:10px
}

.spaceBottom-10{
    margin-bottom:10px
}

.fullWidth{
  width:100%;
}

.fullHeight{
  height:100%;
}
<div id="dvStockCard">
<div class="title spaceBottom-10">My data cart</div>
<table>
  <tr>
    <td id="lastPrice">no  price</td>   
    <td id="change">1234324t</td>
  </tr>
   <tr>
    <td>Range</td>
    <td id="range" class="val">No Rnge</td>
  </tr>
  <tr>
    <td>Open</td>
    <td id="open" class="val">555</td>
  </tr>
  <tr>
    <td>Volume</td>
    <td id="volume"  class="val">DM</td>
  </tr>
    <tr>
    <td>Market Cap</td>
    <td id="marketCap" class="val">Non</td>
  </tr>
   <tr>
    <td></td>
    <td id="timestamp">As of 12:00 AM</td>
  </tr>
  
   <tr>
   <td style="width:50%;"><input type="text" class="fullWidth fullHeight"></td>
   <td style="width:50%"><input type="button" value="Get" class="fullWidth fullHeight"></td>
  </tr>
  
</table>
</div>

My question is how can I make a button and textbox inside the table cell in the table above to get the full height of the row(I tried height:100%)?

By