Table rowspan导致计算器中间行不显示的技术求助

问题描述 #

我尝试完整展示计算器界面，但给enter按钮所在单元格设置rowspan="3"时，计算器下半部分被容器截断，中间行无法正常显示；将rowspan改为1后，计算器可以完整显示，但enter按钮尺寸变小，无法保持跨行的高度。

解决方案 #

问题根源有两个：一是容器article设置了固定高度，导致跨行后的表格高度超出容器被截断；二是表格单元格用了无效的margin属性（表格单元格不支持margin），导致布局间距异常。通过以下修改即可解决：

修改要点 #

1. 取消容器固定高度：将article的height:450px改为height:auto，让容器自适应表格高度，避免内容被截断。
2. 修正单元格间距：将table#calculator td的margin:10px改为padding:10px，表格单元格的间距需用padding实现，margin对单元格无效。
3. 保留跨行设置：继续使用<td rowspan="3">，因为按钮已经设置了width:100%;height:100%;，会自动充满整个跨行单元格。

修改后的完整代码 #

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: auto; /* 修改为自适应高度 */
   text-align: left;
   background: #FFCF40;
   padding-top: 25px;
   padding-bottom: 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;
   padding: 10px; /* 将margin改为padding */
}

table#calculator input {
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border-radius: 7px;
   width: 100%;
   height: 100%;
   border: none; /* 去掉默认边框，统一按钮样式 */
   cursor: pointer; /* 添加鼠标指针效果 */
}
table#calculator textarea {
   width: 100%;
   height: 100px;
   background-color: rgb(55, 105, 62);
   font-size: 1.4em;
   color: rgba(255, 255, 255, 0.7);
   border: none;
   resize: none; /* 禁止调整文本框大小 */
}

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

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

HTML代码（无需修改enter按钮的rowspan）

<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"> <!-- 保留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>
</article>

内容的提问来源于stack exchange，提问作者AHF