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

老师,如果整个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基础 10727楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/飞机大战小项目训练 10730楼
Python全系列/第二阶段:Python 深入与提高/文件处理 10737楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/移动端:基于jQuery使用Ajax和BootStrap 10738楼

老师我想随机显示图片,不想按队列更换,用如下代码,结果图片无法更换,请问问题出在哪里了。主要问题我觉得应该是在

var e= Math.random.randint(0,4)

这一句上。但是不知道该怎么改。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-image: url(img/mayun.jpg);
				background-repeat: no-repeat;
				background-size: 1366px 657px;
			}
			a{
				font-size: 25px;
				color: #FFFFFF;
			}
			.div1{
				width: 300px;
				height: 200px;
				background-color: gray;
				text-align: center;
			}
			
			input{
				width: 40px;
				height: 30px;
			}
			
		</style>
		
		<script type="text/javascript">
			var i=-1
			
			function changebc(){
				var arr=['bjsky.jpg','mayun.jpg','simple.jpg','sxt.jpg','zgc.jpg'];
				
				//if (i<arr.length-1){i++;}
				//else{i=0}
				var e= Math.random.randint(0,4)
				
				document.body.style.backgroundImage="url(img/"+arr[e]+")"
				
			};
			
			function changeove(){
				var div=document.getElementById("div_1");
				div.style.marginLeft=Math.random()*800+'px';
				div.style.marginTop=Math.random()*500+'px';
				
			}
			
			function changeclk(){
				document.body.style.backgroundImage='url(img/1.jpg)';
				document.body.style.backgroundSize='1366px 657px';
				//设置当前div隐藏
				document.getElementById("div_1").style.display="none";
			}
			
		</script>
	</head>
	<body>
		<a href="javascript:changebc()">点击更换主题</a>
		<div class="div1" id="div_1">
			<h3>我是不是你的小宝贝</h3>
			<input type="button" name="" id="" value="是" onclick="changeclk()"/>
			
			<input type="button" name="" id="" value="否" onmouseover="changeove()"/>
			
		</div>
		
	</body>
</html>


Python全系列/第七阶段:网页编程基础/JavaScript 10740楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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