会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132390个问题
Python 全系列/第四阶段:函数式编程和核心特性/正则表达式 10652楼

老师,如果整个div高度定下来,里面表格的内容多出来了,我还想不换行,不加滚动条,全部显示,有办法吗?

我在写的时候,发现如果table不定宽度,那td里的内容没办法隐藏,可是我想法是弹性布局,这宽度定下来了,就不是那种分成3列的弹性布局了,这个有办法避免吗?实在不好意思,老师,代码让我整的有点长,麻烦老师了。

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="/hpi/favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>练习</title>
    <script src="static/js/href.js"></script>
    <!-- 框架必须 start -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="static/css/font-awesome.css" />
    <script src="static/js/jquery-2.0.3.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/jquery-ui.min.js"></script>
    <script src="static/js/inspinia.js"></script>
    <!-- 框架必须 end -->
    <!-- 消息提示插件 start -->
    <link rel="stylesheet" href="static/css/toastr/toastr.min.css" />
    <script src="static/js/toastr/toastr.min.js"></script>
    <!-- 消息提示插件 end -->

    <!-- 弹窗插件 strart-->
    <link rel="stylesheet" href="static/css/sweetalert/sweetalert.css" />
    <script src="static/js/sweetalert/sweetalert.min.js"></script>
    <!-- 弹窗插件 end -->
    <!-- 框架必须(需要放到最后) start -->
    <link rel="stylesheet" href="static/css/animate.css" />
    <link rel="stylesheet" href="static/css/style.css" />
    <link rel="stylesheet" href="static/css/theme.css" />
    <!-- 框架必须(需要放到最后) end -->
    <!-- 菜单插件 start -->
    <script src="static/js/metisMenu/jquery.metisMenu.js"></script>
    <!-- 菜单插件 end -->
    <!-- 滚动条插件 start -->
    <script src="static/js/slimscroll/jquery.slimscroll.js"></script>
    <!-- 滚动条插件 end -->
    <!-- Echarts start -->
    <script src="static/js/echarts/echarts.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/echarts/dark.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/echarts/chalk.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/echarts/walden.js" type="text/javascript" charset="utf-8"></script>
    <!-- Echarts end -->
    <link rel="stylesheet" href="static/css/datatables/datatables.min.css" />
    <script src="static/js/datatables/datatables.min.js"></script>
    <style>
       td{
            color: black;
           font-size:1rem;
        }
       #div{
           display: flex;
       }
      td{
          width: 10px;
          overflow:hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
          -webkit-text-overflow:ellipsis;
       }
      #div1{
      flew-grow:1;
      }
       #div2{
           flew-grow:1
       }
       #div3{
            flew-grow:1
        }
       #div1>table{
           width: 400px ;
           table-layout: fixed
       }
      #div1 >table>td{
           width: 20px;
           border: #0e9aef 1px solid;
           overflow:hidden;
           white-space:nowrap;
           text-overflow: ellipsis;
           -webkit-text-overflow: ellipsis;
       }
        @media screen and (min-width:992px) {
            .col-md-4{
                font-size: 0.1rem}
            @media screen and (min-width:768px) and (max-width: 992px) {
                .col-md-4{
                    font-size: 0.1rem;}
       @media screen and (max-width:768px) {
           .col-md-4 {
               font-size: 0.1rem}
       }
    </style>
<body style="border: rosybrown 1px solid;height: 400px">
    <div class="row" id="div" style="border: #0d3349 1px solid">
        <div class="col-md-4 " id="div1" style="height:100%  ;" >
           <table class="table-hover" >
               <thead><tr><td>收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr></thead>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
        </table>
        </div>
        <div class="col-md-4" id="div2" style="height:100%;border: green 1px solid ">
            <table class="table-hover">
                <thead><tr><td>收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr></thead>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
            </table>
        </div>
        <div class="col-md-4" id="div3" style="height:100%  ;border: blue 1px solid">
            <table class="table-hover">
                <thead><tr><td>收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr></thead>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
            </table>
        </div>
    </div>
    <div id="text">长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字</div>
</body>
</head>
</html>



WEB前端全系列/第四阶段:BootStrap框架模块/BootStrap4基础 10655楼
JAVA 全系列/第一阶段:JAVA 快速入门/飞机大战小项目训练 10658楼
Python 全系列/第二阶段:Python 深入与提高/文件处理 10665楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637