会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132464个问题

老师,如果整个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基础 31037楼

老师,自定义文件下载的视图函数部分代码还可以进行缩减,如下所示的代码可以实现跟视频一致的效果

def file_diy_download(request):
    # 获取 记录id
    id = request.GET.get('id')
    # 得到模型实例
    upload_file_img_diy = UploadFileImgDIY.objects.get(pk=id)
    # 得到模型的 FileField 属性
    file = upload_file_img_diy.file # 获得文件对象,目录分隔符是/,最高目录级别仅仅是父级文件夹
    # 得到 FileField 类的 file 属性, 是一个文件对象
    # file_diy = file.file # 获得以系统盘符开始的绝对路径显示的文件对象,目录分隔符是\

    # 通过 StreamingHttpResponse 进行文件下载,传入的参数为 文件的字节内容
    # response = StreamingHttpResponse(file_diy.read())
    response = StreamingHttpResponse(file.read()) # 这样写能达到一致的效果

    # 通过分割,将 diy/test1_1567676990.csv 获取到 test1_1567676990.csv
    name = file.name.split('/')[-1]
    # name = file_diy.name.split('\\')[-1]  # 第一个\开启转义,下载文件的格式跟name = file.name.split('/')[-1]一样
    # 附件模式
    # 要进行 编码和解码 ,因为http协议规定, 响应头的编码格式必须是 ISO-8859-1
    response['Content-Disposition'] = 'attachment;filename=' + name.encode('utf-8').decode('ISO-8859-1')

    return response


Python 全系列/第十二阶段:Python_Django3框架/Django高级 31038楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/常用类 31039楼
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 31040楼
JAVA 全系列/第二十一阶段:分布式医疗云平台/项目环境搭建(旧) 31043楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/多线程技术(旧) 31044楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/多线程技术(旧) 31045楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/手写服务器项目(旧) 31046楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/常用类 31047楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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