为什么没有自动换行？

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>

希望这有帮助！