Question 175587 in Html Question posted in
Some basic documentation can be found here.

Why isn’t table row showing with rowspan in HTML?

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

Its giving me below output:

enter image description here

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:

enter image description here

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

{
   -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;
}
<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>
Tags:

2

Answers


  1. 0

    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.

    #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 */
}
    <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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search