Table row is not showing with rowspan

I am trying to display the full calculator but its not showing middle row:

Its giving me below output:

But if I change the below line:

<td rowspan="1">
               <input id="buttonEnter" type="button" class="calcButton" value="enter" />
			</td>

It then show me full calculator but small enter button:

I understand that it looks rowspan is applying to all row but how to stop this,

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

{
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}

body {
   line-height: 1;
   width: 960px;
   background: white;
   margin: 30px auto;
   font-family: Verdana, Geneva, sans-serif;
   position: relative;   
}

ol, ul {
   list-style: none;
}

/* page header */
header {
   background: #330570;
   width: 100%;
   color: #FFFFFF;
   font-size: 48px;
   text-align: center;
   line-height: 1.5em; 
}

/* main content */
article {
   width: 960px;
   height: 450px;
   text-align: left;
   background: #FFCF40;
   padding-top: 25px;
}

/* Calculator Table Styles */

table#calculator {
   background-color: rgb(211, 211, 211);

   border: 10px outset rgb(92, 92, 92);
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
   border-radius: 25px;

   padding: 15px;
   margin: 0px auto;

   -moz-box-shadow: rgb(101, 101, 101) 20px 10px 20px;
   -webkit-box-shadow: rgb(101, 101, 101) 20px 10px 20px;
   box-shadow: rgb(101, 101, 101) 20px 10px 20px;
}


table#calculator td {
   width: 40px;
   height: 40px;
   margin: 10px;
}

table#calculator input {

   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border-radius: 7px;
   width: 100%;
   height: 100%;
}
table#calculator textarea {
   width: 100%;
   height: 100px;
   background-color: rgb(55, 105, 62);
   font-size: 1.4em;
   color: rgba(255, 255, 255, 0.7);
}

table#calculator td#decimalTD {
   font-size: 0.9em;
   text-align: right;
}

table#calculator input#decimals {
   width: 35px;
   height: 20px;
   background: transparent;
   text-align: center;
}

<!-- language: lang-html -->

<article>
  <table id="calculator">
    <tr>
      <td colspan="5">
        <textarea id="calcWindow" name="calcWindow"></textarea>
      </td>
    </tr>
    <tr>
      <td>
        <input id="button7" type="button" class="calcButton" value="7" />
      </td>
      <td>
        <input id="button8" type="button" class="calcButton" value="8" />
      </td>
      <td>
        <input id="button9" type="button" class="calcButton" value="9" />
      </td>
      <td>
        <input id="buttonDivide" type="button" class="calcButton" value="/" />
      </td>
      <td>
        <input id="buttonClear" type="button" class="calcButton" value="C" />
      </td>
    </tr>
    <tr>
      <td>
        <input id="button4" type="button" class="calcButton" value="4" />
      </td>
      <td>
        <input id="button5" type="button" class="calcButton" value="5" />
      </td>
      <td>
        <input id="button6" type="button" class="calcButton" value="6" />
      </td>
      <td>
        <input id="buttonMultiply" type="button" class="calcButton" value="*" />
      </td>
      <td rowspan="3">
        <input id="buttonEnter" type="button" class="calcButton" value="enter" />
      </td>
    </tr>
    <tr>
      <td>
        <input id="button1" type="button" class="calcButton" value="1" />
      </td>
      <td>
        <input id="button2" type="button" class="calcButton" value="2" />
      </td>
      <td>
        <input id="button3" type="button" class="calcButton" value="3" />
      </td>
      <td>
        <input id="buttonMinus" type="button" class="calcButton" value="-" />
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input id="button0" type="button" class="calcButton" value="0" />
      </td>
      <td>
        <input id="buttonDecimal" type="button" class="calcButton" value="." />
      </td>
      <td>
        <input id="buttonAdd" type="button" class="calcButton" value="+" />
      </td>
    </tr>
  </table>

<!-- end snippet -->

The problem is in the CSS, not the table. The 4/5/6/ row is aligning to the bottom of the Enter button and is therefore covered by the 0/./+ buttons.

Under your reset rules code, change this:

> vertical-align: baseline;

to this:

> vertical-align: top;

and it'll work.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

{
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: middle; /* <--------------------------------------- HERE */
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}

body {
   line-height: 1;
   width: 960px;
   background: white;
   margin: 30px auto;
   font-family: Verdana, Geneva, sans-serif;
   position: relative;   
}

ol, ul {
   list-style: none;
}

/* page header */
header {
   background: #330570;
   width: 100%;
   color: #FFFFFF;
   font-size: 48px;
   text-align: center;
   line-height: 1.5em; 
}

/* main content */
article {
   width: 960px;
   height: 450px;
   text-align: left;
   background: #FFCF40;
   padding-top: 25px;
}

/* Calculator Table Styles */

table#calculator {
   background-color: rgb(211, 211, 211);

   border: 10px outset rgb(92, 92, 92);
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
   border-radius: 25px;

   padding: 15px;
   margin: 0px auto;

   -moz-box-shadow: rgb(101, 101, 101) 20px 10px 20px;
   -webkit-box-shadow: rgb(101, 101, 101) 20px 10px 20px;
   box-shadow: rgb(101, 101, 101) 20px 10px 20px;
}


table#calculator td {
   width: 40px;
   height: 40px;
   margin: 10px;
}

table#calculator input {

   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border-radius: 7px;
   width: 100%;
   height: 100%;
}
table#calculator textarea {
   width: 100%;
   height: 100px;
   background-color: rgb(55, 105, 62);
   font-size: 1.4em;
   color: rgba(255, 255, 255, 0.7);
}

table#calculator td#decimalTD {
   font-size: 0.9em;
   text-align: right;
}

table#calculator input#decimals {
   width: 35px;
   height: 20px;
   background: transparent;
   text-align: center;
}

<!-- language: lang-html -->

<article>
  <table id="calculator">
    <tr>
      <td colspan="5">
        <textarea id="calcWindow" name="calcWindow"></textarea>
      </td>
    </tr>
    <tr>
      <td>
        <input id="button7" type="button" class="calcButton" value="7" />
      </td>
      <td>
        <input id="button8" type="button" class="calcButton" value="8" />
      </td>
      <td>
        <input id="button9" type="button" class="calcButton" value="9" />
      </td>
      <td>
        <input id="buttonDivide" type="button" class="calcButton" value="/" />
      </td>
      <td>
        <input id="buttonClear" type="button" class="calcButton" value="C" />
      </td>
    </tr>
    <tr>
      <td>
        <input id="button4" type="button" class="calcButton" value="4" />
      </td>
      <td>
        <input id="button5" type="button" class="calcButton" value="5" />
      </td>
      <td>
        <input id="button6" type="button" class="calcButton" value="6" />
      </td>
      <td>
        <input id="buttonMultiply" type="button" class="calcButton" value="*" />
      </td>
      <td rowspan="3">
        <input id="buttonEnter" type="button" class="calcButton" value="enter" />
      </td>
    </tr>
    <tr>
      <td>
        <input id="button1" type="button" class="calcButton" value="1" />
      </td>
      <td>
        <input id="button2" type="button" class="calcButton" value="2" />
      </td>
      <td>
        <input id="button3" type="button" class="calcButton" value="3" />
      </td>
      <td>
        <input id="buttonMinus" type="button" class="calcButton" value="-" />
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input id="button0" type="button" class="calcButton" value="0" />
      </td>
      <td>
        <input id="buttonDecimal" type="button" class="calcButton" value="." />
      </td>
      <td>
        <input id="buttonAdd" type="button" class="calcButton" value="+" />
      </td>
    </tr>
  </table>

<!-- end snippet -->

Use CSS Grid (of 5 columns) instead
then, all you need is to set for the the desired buttons (and the display) the spanning columns or rows using: grid-column grid-row:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* { margin: 0; box-sizing: border-box; }

.calculator {
  display: inline-grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
  padding: 1rem;
  background-color: lightgray;
  border: 0.25rem solid darkgray;
  border-radius: 0.4rem;
}

.result {
  padding: 1rem;
  grid-column: 1 / 6;
  height: 6rem;
  background-color: #374;
  color: #fff;
  font-size: 1.4rem;
  text-align: right;
}

[data-btn] {
  padding: 1rem;
  border: 0.2rem solid #777;
  border-radius: 0.5rem;
}

[data-btn="0"] {
  grid-column: 1 / 3;
}

[data-btn="enter"] {
  grid-column: 5;
  grid-row: 3 / 6;
}

<!-- language: lang-html -->

<div class="calculator">
  <textarea class="result" readonly>123567.50</textarea>
  <button type="button" data-btn="7">7</button>
  <button type="button" data-btn="8">8</button>
  <button type="button" data-btn="9">9</button>
  <button type="button" data-btn="/">/</button>
  <button type="button" data-btn="clear">C</button>
  <button type="button" data-btn="4">4</button>
  <button type="button" data-btn="5">5</button>
  <button type="button" data-btn="6">6</button>
  <button type="button" data-btn="*">*</button>
  <button type="button" data-btn="1">1</button>
  <button type="button" data-btn="2">2</button>
  <button type="button" data-btn="3">3</button>
  <button type="button" data-btn="-">-</button>
  <button type="button" data-btn="0">0</button>
  <button type="button" data-btn=".">.</button>
  <button type="button" data-btn="+">+</button>
  <button type="button" data-btn="enter">⏎</button>
</div>

<!-- end snippet -->

Also, use the preferred semantic elements like <button>, the data-* attribute, and classes instead of IDs - for potentially repeatable component units, like a calculator.

I know here it's not a code free website but I found the idea interesting to see how it can be done with a grid.
As several comments is saying, it would be the right way to do that instead of table.

I made a snippet, it's one possibility several different could be done.
For grid, using repeat 5 for row and col, and using span keyword on 0 on x axis and enter on y axis
also I put data attribute for each, you can read directly dataset of ekement cliked.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#calcContainer {
display: inline-block;
padding: 1em;
background-color: lightgray;
border: 0.25em solid darkgray;
border-radius: 15px;
}
#calculator {
display: grid;
grid-template-rows: 2fr 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(5, auto);
gap: 10px;
}
#div1 {
grid-area: 1 / 1 / 2 / 6;
}
#div2 {
grid-area: 2 / 1 / 3 / 2;
}
#div3 {
grid-area: 2 / 2 / 3 / 3;
}
#div4 {
grid-area: 2 / 3 / 3 / 4;
}
#div5 {
grid-area: 2 / 4 / 3 / 5;
}
#div6 {
grid-area: 2 / 5 / 3 / 6;
}
#div7 {
grid-area: 3 / 1 / 4 / 2;
}
#div8 {
grid-area: 3 / 2 / 4 / 3;
}
#div9 {
grid-area: 3 / 3 / 4 / 4;
}
#div10 {
grid-area: 3 / 4 / 4 / 5;
}
#div11 {
grid-area: 4 / 1 / 5 / 2;
}
#div12 {
grid-area: 4 / 2 / 5 / 3;
}
#div13 {
grid-area: 4 / 3 / 5 / 4;
}
#div14 {
grid-area: 4 / 4 / 5 / 5;
}
#div15 {
grid-area: 5 / 1 / 6 / 3;
}
#div16 {
grid-area: 5 / 3 / 6 / 4;
}
#div17 {
grid-area: 5 / 4 / 6 / 5;
}
#div18 {
grid-area: 3 / 5 / 6 / 6;
}
.calcResult {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: lightgreen;
border: 2px solid black;
}
.calcButton {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #e6eaea;
border: 2px solid black;
border-radius: 10px;
}
.simple {
width: 50px;
height: 50px;
}
.doubleWidth {
width: 114px;
/* 2*50px + 1 grip gap 10px + 2 border 2px */
height: 50px;
}
.tripleHeight {
width: 50px;
height: 178px;
/* 3*50px + 2 grid gap 2*10px + 4 border 2*4px */
}

<!-- language: lang-html -->

<div id="calcContainer">
<div id="calculator">
<div id="div1" class="calcResult">
<div data-val="result">result</div>
</div>
<div id="div2">
<div data-val="7" class="calcButton simple">7</div>
</div>
<div id="div3">
<div data-val="8" class="calcButton simple">8</div>
</div>
<div id="div4">
<div data-val="9" class="calcButton simple">9</div>
</div>
<div id="div5">
<div data-val="/" class="calcButton simple">/</div>
</div>
<div id="div6">
<div data-val="clear" class="calcButton simple">C</div>
</div>
<div id="div7">
<div data-val="4" class="calcButton simple">4</div>
</div>
<div id="div8">
<div data-val="5" class="calcButton simple">5</div>
</div>
<div id="div9">
<div data-val="6" class="calcButton simple">6</div>
</div>
<div id="div10">
<div data-val="*" class="calcButton simple">*</div>
</div>
<div id="div11">
<div data-val="1" class="calcButton simple">1</div>
</div>
<div id="div12">
<div data-val="2" class="calcButton simple">2</div>
</div>
<div id="div13">
<div data-val="3" class="calcButton simple">3</div>
</div>
<div id="div14">
<div data-val="-" class="calcButton simple">-</div>
</div>
<div id="div15">
<div data-val="0" class="calcButton doubleWidth">0</div>
</div>
<div id="div16">
<div data-val="." class="calcButton simple">.</div>
</div>
<div id="div17">
<div data-val="+" class="calcButton simple">+</div>
</div>
<div id="div18">
<div data-val="enter" class="calcButton tripleHeight">enter</div>
</div>
</div>
</div>

<!-- end snippet -->