需要设置
table-layout:fixed和 表元件上的合适的宽度,以及
overflow:hidden和
white-space:nowrap在桌子上的细胞。
例子
定宽列
表格的宽度必须与固定宽度的单元格相同(或更小)。
使用一个固定宽度的列:
* { box-sizing: border-box;}table { table-layout: fixed; border-collapse: collapse; width: 100%; max-width: 100px;}td { background: #F00; padding: 20px; overflow: hidden; white-space: nowrap; width: 100px; border: solid 1px #000;}<table> <tbody> <tr> <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> </tr> <tr> <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> </tr> </tbody></table>使用多个固定宽度的列:
* { box-sizing: border-box;}table { table-layout: fixed; border-collapse: collapse; width: 100%; max-width: 200px;}td { background: #F00; padding: 20px; overflow: hidden; white-space: nowrap; width: 100px; border: solid 1px #000;}<table> <tbody> <tr> <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> </tr> <tr> <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> </tr> </tbody></table>固定和流体宽度色谱柱
必须设置 表格的宽度,但是任何多余的宽度都可以由流体单元简单地获取。
对于多列,固定宽度和流体宽度:
* { box-sizing: border-box;}table { table-layout: fixed; border-collapse: collapse; width: 100%;}td { background: #F00; padding: 20px; border: solid 1px #000;}tr td:first-child { overflow: hidden; white-space: nowrap; width: 100px;}<table> <tbody> <tr> <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> </tr> <tr> <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> </tr> </tbody></table>


