मैं अपनी मेज के अंदर की कोशिकाओं से पैडिंग को हटाने की कोशिश कर रहा हूँ। मैंने इसे प्रासंगिक सीएसएस चयनकर्ताओं में पैडिंग नहीं करने के लिए सेट किया है लेकिन सफलता नहीं है।

जैसा कि आप देख सकते हैं, इन सभी कोशिकाओं पर पैडिंग है। यहां छवि विवरण दर्ज करें

मैं चाहूंगा कि वहां न हो। मैंने कई अलग-अलग पैडिंग सेटिंग्स की कोशिश की है और लंबवत संरेखण को बदलने से टेक्स्ट को स्थानांतरित करने के अलावा कोई फर्क नहीं पड़ता है, पैडिंग नीचे और ऊपर के बीच फैलाने के लिए नीचे से नीचे जाती है।

नीचे कोड है:

'use strict'
let table = document.getElementById("mainTable")
let rows = table.querySelectorAll("tbody tr")
let columns = table.querySelectorAll("#weeks th")

for (let row of rows) {
  for (let o = 0; o<columns.length-1; o++) {
    let cell = document.createElement("td")
    cell.innerHTML='&nbsp'


    cell.addEventListener("click", function() {
      if (cell.getElementsByTagName("input")[0]) { return } //If cell currently has an input box
      //
      let oldValue = ""
      if (cell.innerHTML !== "&nbsp;") { //if cell has a saved value
        oldValue = cell.innerHTML
      }
      cell.innerHTML = '<input type="text" class="cellInputs">'

      //update input box with old value and focus it
      cell.getElementsByTagName("input")[0].focus()
      cell.getElementsByTagName("input")[0].value = oldValue

      cell.getElementsByTagName("input")[0].addEventListener("keypress", function(e) {
        if (e.keyCode === 13) {
          cell.innerHTML=cell.getElementsByTagName("input")[0].value
          e.preventDefault()
          return true
        }
      })
      cell.getElementsByTagName("input")[0].addEventListener("input", function(e) {
        console.log(e)
        let cellValue = cell.getElementsByTagName("input")[0].value
        if (e.data === "." && (cellValue.split('.').length-1 > 1 || cellValue === ".")) {
          console.log("stop")
          cell.getElementsByTagName("input")[0].value = (cellValue).substring(0, cellValue.length - e.data.length)
        }
        if (isNaN(e.data) && e.data !==".") {
          console.log("Stop")
          cell.getElementsByTagName("input")[0].value = (cellValue).substring(0, cellValue.length - e.data.length)
        }

        //store value inputted into the actual cell
      })
      cell.getElementsByTagName("input")[0].addEventListener("paste", function(e) {
   //      clipboardData = e.clipboardData || window.clipboardData;
   // pastedData = clipboardData.getData('Text');

        let cellValue = cell.getElementsByTagName("input")[0].value
        if (cellValue !== "") {
          e.preventDefault()
          return false
        }
        if (e.clipboardData.getData('text') === "." && (cellValue.split('.').length-1 > 1 || cellValue === ".")) {
          e.preventDefault()
          return false
        }
        if (isNaN(e.clipboardData.getData('text')) && e.clipboardData.getData('text') !==".") {
          e.preventDefault()
          return false
        }

        //store value inputted into the actual cell
      })
      cell.getElementsByTagName("input")[0].addEventListener("focusout", function() {
        console.log(document.activeElement)
        cell.innerHTML=cell.getElementsByTagName("input")[0].value
      })
    })


    row.appendChild(cell)
  }
}
*{
  padding: 0;
  margin: 0;
  font-family: "Trebuchet MS", Times, serif;
  box-sizing:border-box;
}
html{
  background-color: #35454E;
  overflow: hidden;
}
html *{
  font-family: "Work Sans", Arial, sans-serif !important;
  color: white !important;
}
table{
  border-collapse: collapse;
  border-spacing: 0px;
  color:#35454E;
  height:100%;
  width:100%;
}
table, th{
  border: 2px solid white;
  padding:0;
}
th{
  vertical-align:top;
  font-size: 2.5vw;
}
td{
  vertical-align:top;
  box-sizing:border-box;
  position: relative;
    border: 2px solid white;
    padding:0;
    text-align: center;
    font-size: 2.5vw;
    padding:0;
}
.cellInputs{
  position: absolute;
  width:100%;
  height:100%;
  display: block;
  top:0;
  left:0;
  border:none;
  text-align: center;
  background-color: #35454E;
  word-wrap: break-word;
  font-size: 2.5vw;
}
<html>
<head>
  <link rel="stylesheet" type="text/css" href="MMS.css">
  <title>Money Management</title>
</head>
<body>
  <table id="mainTable"> 
    <thead>
      <tr>
        <th>2019</th>
        <th colspan="5">January</th>
      </tr>
      <tr id="weeks">
        <th>&nbsp</th>
        <th>31/12/2018</th>
        <th>07/01/2019</th>
        <th>14/01/2019</th>
        <th>21/01/2019</th>
        <th>28/01/2019</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Balance</th>
      </tr>
      <tr>
        <th>Pay</th>
      </tr>
      <tr>
        <th>&nbsp</th>
      </tr>
      <tr>
        <th>Rent</th>
      </tr>
      <tr>
        <th>Food</th>
      </tr>
      <tr>
        <th>&nbsp</th>
      </tr>
      <tr>
        <th>Total</th>
      </tr>

    </tbody>
  </table>
</body>
<script src="MMS.js"></script>
</html>
-2
Dean 29 जून 2019, 13:24

1 उत्तर

सबसे बढ़िया उत्तर

height:100% को टेबल से हटा दें।

2
Ravi Kadyan 29 जून 2019, 13:35