表格行沒有顯示行跨度

我試圖顯示完整的計算器，但它不顯示中間一行:

它給了我下面的輸出:

enter image description here

但是如果我改變下面的線:

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

然后，它向我展示了完整的計算器，但小輸入按鈕:

enter image description here

我知道看起來rowspan適用于所有行，但如何停止這一點，

{
   -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>

問題出在CSS，而不是表格。4/5/6/行與Enter按鈕的底部對齊，因此被0/覆蓋。/+按鈕。

在您的重置規則代碼下，更改以下內容:

垂直對齊:基線；

對此:

垂直對齊:頂部；

會成功的。

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

<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>

請改用CSS網格(5列) 然后，您需要做的就是使用grid-column grid-row為所需的按鈕(和顯示)設置跨越的列或行:

* { 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;
}

<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">&#x23CE;</button>
</div>

我知道這不是一個免費的網站，但我發現這個想法很有趣，看看如何用網格來實現它。正如一些評論所說，這將是正確的做法，而不是表。

我做了一個片段，這是一種可能性，可以有幾種不同的做法。對于網格，對行和列使用重復5，對x軸上的0使用span關鍵字，對y軸上的enter 我也為每一個放入了數據屬性，你可以直接讀取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>

上一篇c 構造json對象

下一篇django json

色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

網站導航

網站導航

網站分類

表格行沒有顯示行跨度

色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

網站導航

網站導航

網站分類

表格行沒有顯示行跨度

相關文章