Question

两个表的内容可编辑。

第一个在键入时具有自动换行符，另一个则没有。为什么？添加了简单的比较表，两者均可工作。

奇怪，为什么会这样？

span {width: 100% !important;background-color:#e6e6e6;display: inline-block;}	 
.k2table {table-layout: fixed; width:600px;border-collapse: collapse}
.k2table tr {height:18px} 
.k2table td {text-align: left;padding:1px;white-space: nowrap;} 
.k2table td+td {text-align: right;width:70px;} 
.k2table td+td+td {text-align: right;width:70px;} 
.k2table td+td+td+td {text-align: right;width:110px;}
.k2table td+td+td+td+td {text-align: right;width:110px;}
.k2table td+td+td+td+td+td {text-align: right;width:110px;}
.princ {table-layout: fixed; width:600px;border-collapse: collapse}
.princ tr {line-height:18px} 
.princ td {text-align: left;padding:1px;white-space:}

<table class="k2table">
<tr><td colspan="6"><span contenteditable="true"></span></td></tr>
<tr><td><br></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

<table class="princ ht">
<tbody><tr><td><span contenteditable="true"></span></td></tr>
<tr><td><br></td></tr>
</tbody></table>

Simple comparison
<table width="400">
  <tr>
  <td>
  <span contenteditable="true" style="display:block; background-color:red; width:100%;">xxxx</span>
  </td>
  </tr>
</table>

<table width="400">
  <tr>
  <td colspan="2">
  <span contenteditable="true" style="display:block; background-color:red; width:100%;">xxxx</span>
  </td>
  </tr>
  <tr>
  <td>
  1
  </td>
    <td>
  2
  </td>
  </tr>

  
</table>

Answer 1

这是因为您的第二张表的CSS规则缺少其nowrap属性的white-space值。作为参考，下面是导致两个表之间存在差异的两条CSS规则。

.k2table td {text-align: left;padding:1px;white-space: nowrap;}

.princ td {text-align: left;padding:1px;white-space:}

您可能想将.pric td CSS选择器更改为以下内容：

.princ td {text-align: left;padding:1px;white-space:nowrap}

然后两个表将工作相同。为了完整起见，我使用上述修复程序编辑了您的代码沙箱

span {width: 100% !important;background-color:#e6e6e6;display: inline-block;}	 
.k2table {table-layout: fixed; width:600px;border-collapse: collapse}
.k2table tr {height:18px} 
.k2table td {text-align: left;padding:1px;white-space:nowrap;} 
.k2table td+td {text-align: right;width:70px;} 
.k2table td+td+td {text-align: right;width:70px;} 
.k2table td+td+td+td {text-align: right;width:110px;}
.k2table td+td+td+td+td {text-align: right;width:110px;}
.k2table td+td+td+td+td+td {text-align: right;width:110px;}
.princ {table-layout: fixed; width:600px;border-collapse: collapse}
.princ tr {line-height:18px} 
.princ td {text-align: left;padding:1px;white-space:nowrap}

<table class="k2table">
<tr><td colspan="6"><span contenteditable="true"></span></td></tr>
<tr><td><br></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

<table class="princ ht">
<tbody><tr><td><span contenteditable="true"></span></td></tr>
<tr><td><br></td></tr>
</tbody></table>

Simple comparison
<table width="400">
  <tr>
  <td>
  <span contenteditable="true" style="display:block; background-color:red; width:100%;">xxxx</span>
  </td>
  </tr>
</table>

<table width="400">
  <tr>
  <td colspan="2">
  <span contenteditable="true" style="display:block; background-color:red; width:100%;">xxxx</span>
  </td>
  </tr>
  <tr>
  <td>
  1
  </td>
    <td>
  2
  </td>
  </tr>

  
</table>

希望有帮助！

为什么没有跨度自动换行？

1 个答案: