Why no auto line break in span?

Question

Two tables with a contenteditable span.

The first one has auto row break when typing and the other not. Why? Added simple comparison table where both work.

Strange, any thoughts on why this is the case?

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

This is because your CSS rule for your second table is missing the nowrap value for its white-space property. For reference here are the two CSS rules causing the discrepancy between the two tables.

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

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

You probably want to change your .pric td CSS selector to the following:

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

then both tables will work the same. For completeness I edited your code sandbox with the above mentioned fix

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>

Hopefully that helps!