contenteditable을 포함한 열 너비 글리치

Question

Firefox에서만 나타납니다. 1 셀 시작 부분에 linebreak를 추가하여 어떤 일이 발생하는지 확인하거나 스크린 샷을 확인하십시오. 내가 원하는 것은 : 1. 열 너비는 높이에서 성장한다 일정 2 표를 유지해야

<style> 
td { 
    white-space: pre-wrap; 
    word-break: break-all; 
    width: 200px; 
} 
</style> 
<table border="1"> 
    <caption>Таблица размеров обуви</caption> 
    <tr> 
    <th>Россия</th> 
    <th>Великобритания</th> 
    <th>Европа</th> 
    <th>Длина ступни, см</th> 
    </tr> 
    <tr> 
    <td contenteditable="true">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> 
    <td contenteditable="true">3,5</td> 
    <td contenteditable="true">36</td> 
    <td contenteditable="true">23</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">35,5</td> 
    <td contenteditable="true">4</td> 
    <td contenteditable="true">36⅔</td> 
    <td contenteditable="true">23–23,5</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">36</td> 
    <td contenteditable="true">4,5</td> 
    <td contenteditable="true">37⅓</td> 
    <td contenteditable="true">23,5</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">36,5</td> 
    <td contenteditable="true">5</td> 
    <td contenteditable="true">38</td> 
    <td contenteditable="true">24</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">37</td> 
    <td contenteditable="true">5,5</td> 
    <td contenteditable="true">38⅔</td> 
    <td contenteditable="true">24,5</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">38</td> 
    <td contenteditable="true">6</td> 
    <td contenteditable="true">39⅓</td> 
    <td contenteditable="true">25</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">38,5</td> 
    <td contenteditable="true">6,5</td> 
    <td contenteditable="true">40</td> 
    <td contenteditable="true">25,5</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">39</td> 
    <td contenteditable="true">7</td> 
    <td contenteditable="true">40⅔</td> 
    <td contenteditable="true">25,5–26</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">40</td> 
    <td contenteditable="true">7,5</td> 
    <td contenteditable="true">41⅓</td> 
    <td contenteditable="true">26</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">40,5</td> 
    <td contenteditable="true">8</td> 
    <td contenteditable="true">42</td> 
    <td contenteditable="true">26,5</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">41</td> 
    <td contenteditable="true">8,5</td> 
    <td contenteditable="true">42⅔</td> 
    <td contenteditable="true">27</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">42</td> 
    <td contenteditable="true">9</td> 
    <td contenteditable="true">43⅓</td> 
    <td contenteditable="true">27,5</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">43</td> 
    <td contenteditable="true">9,5</td> 
    <td contenteditable="true">44</td> 
    <td contenteditable="true">28</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">43,5</td> 
    <td contenteditable="true">10</td> 
    <td contenteditable="true">44⅔</td> 
    <td contenteditable="true">28–28,5</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">44</td> 
    <td contenteditable="true">10,5</td> 
    <td contenteditable="true">45⅓</td> 
    <td contenteditable="true">28,5–29</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">44,5</td> 
    <td contenteditable="true">11</td> 
    <td contenteditable="true">46</td> 
    <td contenteditable="true">29</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">45</td> 
    <td contenteditable="true">11,5</td> 
    <td contenteditable="true">46⅔</td> 
    <td contenteditable="true">29,5</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">46</td> 
    <td contenteditable="true">12</td> 
    <td contenteditable="true">47⅓</td> 
    <td contenteditable="true">30</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">46,5</td> 
    <td contenteditable="true">12,5</td> 
    <td contenteditable="true">48</td> 
    <td contenteditable="true">30,5</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">47</td> 
    <td contenteditable="true">13</td> 
    <td contenteditable="true">48⅔</td> 
    <td contenteditable="true">31</td> 
    </tr> 
    <tr> 
    <td contenteditable="true">48</td> 
    <td contenteditable="true">13,5</td> 
    <td contenteditable="true">49⅓</td> 
    <td contenteditable="true">31,5</td> 
    </tr> 
</table> 
</body> 

</html> 

https://jsfiddle.net/s8q0evkf/

Answer 1

를 사용하여 최대 폭 최대 폭을 설정하는

td { 
    white-space: pre-wrap; 
    word-break: break-all; 
    width: 200px; 
    max-width: 200px; 
} 

넘치는 내용이 이제 높이 i에서 오버플로됩니다. 너비의 너비.

문서 : http://www.w3schools.com/cssref/pr_dim_max-width.asp