css怎么控制表格不要自动换行?

很多时候,我们在项目开发中会出现,单元格内容由于太多导致的换行问题,让表格显得非常的丑陋。下面我们就来看一下css控制表格不自动换行的方法。

我们可以通过为表格添加white-space:nowrap样式设置表格内容不换行。

示例:

<style type="text/css">
.dt {table-layout:fixed; width:100px;}
.dt td, .dt th{white-space:nowrap;overflow:hidden;}
</style>

<table class="dt">
      <tr>
      <td>文字1文字2文字3文字4文字5文字6文字7文字文字文字文字文字文字
      文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
      </tr>

     </table>

效果如下:

文字1文字2文字3文字4文字5文字6文字7文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

white-space 属性设置如何处理元素内的空白。

可能的值:

1.jpg

更多相关知识请关注前端学习网站

以上就是css怎么控制表格不要自动换行?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏