Question

我需要在表格中生成的td标签内的跨度。

为了使填充td我已将其定义为宽度和高度为100％的内联块。但是，如果您开始在最后一个单元格中按下del键，它将开始删除表格外的内容。

如果我将span定义为display：table-cell可以防止这种情况，但是我有问题让它填充父td。我需要跨度，因为它会阻止td中的其他内容被删除。

是否有一个CSS属性可以添加到一个类中，使得它更像是一个表单元格，删除只在该容器内生效？

    <div contenteditable ="true">

<table contenteidtable ="false" class="a">
  <tbody contenteditable="false">
    <tr contenteditable="false">
      <td  contenteditable="false">
        <span contenteditable = "true">1</span>
      </td>
      <td  contenteditable="false">
        <span contenteditable = "true">2</span>
      </td>
      <td  contenteditable="false">
        <span contenteditable = "true">3</span>
      </td>
    </tr>
    <tr contenteditable="false">
      <td  contenteditable="false">
        <span contenteditable = "true">4</span>
      </td>
      <td  contenteditable="false">
        <span contenteditable = "true">5</span>
      </td>
      <td  contenteditable="false">
        <span contenteditable = "true">6</span>
      </td>
    </tr>
    <tr contenteditable="false">
      <td  contenteditable="false">
        <span contenteditable = "true">7</span>
      </td>
      <td  contenteditable="false">
        <span contenteditable = "true">8</span>
      </td>
      <td  contenteditable="false">
        <span contenteditable = "true">9</span>
      </td>
    </tr>
  </tbody>
</table>
<p>
Some text here
</p>
<br />
<br />
<table contenteidtable ="false" class="b">
  <tbody contenteditable="false">
    <tr contenteditable="false">
      <td  contenteditable="false">
        <span contenteditable = "true">1</span>
      </td>
      <td  contenteditable="false">
        <span contenteditable = "true">2</span>
      </td>
      <td  contenteditable="false">
        <span contenteditable = "true">3</span>
      </td>
    </tr>
    <tr contenteditable="false">
      <td  contenteditable="false">
        <span contenteditable = "true">4</span>
      </td>
      <td  contenteditable="false">
        <span contenteditable = "true">5</span>
      </td>
      <td  contenteditable="false">
        <span contenteditable = "true">6</span>
      </td>
    </tr>
    <tr contenteditable="false">
      <td  contenteditable="false">
        <span contenteditable = "true">7</span>
      </td>
      <td  contenteditable="false">
        <span contenteditable = "true">8</span>
      </td>
      <td  contenteditable="false">
        <span contenteditable = "true">9</span>
      </td>
    </tr>
  </tbody>
</table>
<p>
Some text here
</p>
</div>



    table {
    table-layout:fixed;
}

table,
/*table.gsm-i-tbl > tbody > tr > th,*/
tabl > tbody > tr > td{
    border: 1px dashed lightgrey;
    border-collapse: separate !important;
    border-spacing: 2px !important; 
}

/*table.gsm-i-tbl > tbody > tr > th,*/ 
table > tbody > tr > td {
    word-wrap: break-word;
    white-space: pre;
    padding: 0px !important;
    margin: 0px !important;
    overflow-wrap: break-word;
}

table tr td {
  border: 1px dashed lightgrey;
  background-color: transparent;
}

table {
  height: 300px;
  width: 300px;
}

table.a > tbody > tr > td > span {
    width: 100% !important;
    height: 100% !important;
    display: table-cell;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    padding: 0px !important;
    margin: 0px !important;
    background-color: coral !important;
    border: none !important;
    outline: none !important;
}

table.b > tbody > tr > td > span {
    width: 100% !important;
    height: 100% !important;   
    display: inline-block;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    padding: 0px !important;
    margin: 0px !important;
    background-color: coral !important;
    border: none !important;
    outline: none !important;
}

https://jsfiddle.net/wuo24jns/29/

上面的jsfiddle有2个表格。表之间的唯一区别是第一个表的跨度显示类型为table-cell，第二个表为内联块。

如果单击第9个单元格，如果第一个表格并按删除几次，它将只删除单元格的内容（这是正确的），但此跨度不会填充此中的TD。

第二个表，跨度填充每个TD但是，如果你单击第二个表中的单元格9并开始按删除键，它将吸入表格之外的“some here here”内容并开始删除

Answer 1

我不确定这是否完全涵盖了它，但它可能是一个开始。在小提琴中，我将表b的样式移动到html中并添加了“scoped”。

<style scoped>
    table.b > tbody > tr > td > span {
        width: 100% !important;
        height: 100% !important;   
        display: inline-block;
        word-wrap: break-word;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        padding: 0px !important;
        margin: 0px !important;
        background-color: coral !important;
        border: none !important;
        outline: none !important;
    }
</style>

请参阅此文章：http://blog.frankmtaylor.com/2013/03/18/contenteditable-css-scoped-and-advanced-in-browser-editing/

这对我来说是另一个新的。希望有所帮助。

Answer 2

我想我明白了。你将整个事物包裹在<div contenteditable ="true">中。所有后代都继承了这一点。将最后一个<p>移到该div之外。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

“如果未设置此属性，则其默认值将从其父元素继承。”

复制表格单元格属性

2 个答案: