Почему нет автоматического разрыва строки в промежутке? - PullRequest
Новая
       16

Почему нет автоматического разрыва строки в промежутке?

1 голос
/ 03 апреля 2019

Две таблицы с допустимым интервалом.

Первый имеет автоматический разрыв строки при наборе текста, а другой нет.Зачем?Добавлена ​​простая таблица сравнения, где оба работают.

Странно, есть мысли о том, почему это так? 

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>

1 Ответ

1 голос
/ 04 апреля 2019

Это потому, что в правиле 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>

Надеюсь, это поможет!

...