个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
24
4
最初，我在右上角有一个小缺口，这让我很烦:
P.S.:如果您仍然看不到它，它位于光标上方的右上角。
然后我将蓝色标题的宽度更改为 102% 以覆盖间隙:
它解决了间隙问题但又产生了另一个问题，现在如果您单击表格并向右拖动，它会将表格向右移动，隐藏表格的左侧。如何在不拧 table 的情况下盖住缝隙？
提前致谢。
$(function(){
$( "#btfirst" ).button({
icons: {
primary: "ui-icon-seek-first"
},
text: false
});
$("#btfirst").css({'height': '1.2em','margin':'1px'});
$( "#btprev" ).button({
icons: {
primary: "ui-icon-seek-prev"
},
text: false
});
$("#btprev").css({'height': '1.2em','margin':'1px'});
$( "#btnext" ).button({
icons: {
primary: "ui-icon-seek-next"
},
text: false
});
$("#btnext").css({'height': '1.2em','margin':'1px'});
$( "#btlast" ).button({
icons: {
primary: "ui-icon-seek-end"
},
text: false
});
$("#btlast").css({'height': '1.2em','margin':'1px'});
$("body").css("overflow", "hidden");
});html {
width: 100%;
height: 100%;
}
@font-face {
font-family: 'agroverdanab';
src: url('./fonts/agroverdanab.eot');
src: local('agroverdanab'), url('./fonts/agroverdanab.ttf') format('truetype');
font-family: 'agroverdana';
src: url('./fonts/agroverdana.eot');
src: local('agroverdana'), url('./fonts/agroverdana.ttf') format('truetype');
}
body {
float: center;
border: 1px solid #9BC2E6;
box-sizing: border-box;
width: 99.4%;
height: 99%;
margin:0.3% 0.3% 0.3% 0.3%;
}
.scrollingtable {
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
overflow: hidden;
width: auto; /*se a tabela tiver tamanho fixo set em pixels, senaõ coloque auto*/
min-width: 100%; /*se o width acima for em %, set o minimo, senão set 0*/
height: 100%; /*se a tabela tiver tamanho fixo set em pixels, senaõ coloque auto*/
min-height: 100%; /*se o width acima for em %, set para ser grande o suficiente para caber scrollbar arrows + caption + thead = 104px*/
font-family: 'agroverdana';
font-size: 16px;
line-height: 20px;
padding: 1px 0 100px 0; /*precisa fazer espaço para o titulo*/
text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
position: relative;
border-top: 1px solid white; /*a borda da table header*/
height: 100%;
padding-top: 20px; /*determina a altura do table header*/
}
.scrollingtable > div:before {
top: 0;
background: #9BC2E6; /*fundo da table header*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
}
.scrollingtable > div > div {
min-height: 0; /*se % coloque 0, se fixo coloque 43px*/
max-height: 100%;
overflow: scroll;
overflow-x: hidden;
border: 1px solid white;
}
.scrollingtable > div > div:after {background: white;} /*combina com o background da página*/
.scrollingtable > div > div > table {
width: 102%;
border-spacing: 0;
margin-top: -20px; /*o inverso do tamanho da table header*/
margin-right: 1px;
}
.scrollingtable > div > div > table > caption {
font-size:15px;
position: absolute;
top: -20px; /*inverso do tamanho do titulo "engenharia"*/
margin-top: -1px; /*inverso da border-width*/
width: 100%;
font-weight: bold;
text-align: center;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
vertical-align: bottom;
white-space: nowrap;
text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
display: inline-block;
padding: 0 6px 0 6px; /*padding das linhas*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 20px; /*combina com a altura da table header*/
border-left: 1px solid #9BC2E6;
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
position: absolute;
top: 0;
white-space: pre-wrap;
color: black; /*cor do texto*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}
.scrollingtable > div > div > table > thead > tr > * + :before {
content: "";
display: block;
min-height: 20px; /*combina com a altura da coluna header*/
padding-top: 1px;
border-left: 2px solid white; /*border entre a s linhas*/
}
.scrollingtable .scrollbarhead {float: right;}
.scrollingtable .scrollbarhead:before {
position: absolute;
width: 100px;
top: -1px; /*borda inversa*/
background: white; /*cor pra combinar com o fundo da página*/
}
.scrollingtable > div > div > table > tbody > tr:after {
content: "";
display: table-cell;
position: relative;
padding: 0;
border-top: 1px solid white;
top: -1px; /*inverso da border*/
}
.scrollingtable > div > div > table > tbody {vertical-align: top;}
.scrollingtable > div > div > table > tbody > tr {background: white;} /*White lines*/
.scrollingtable > div > div > table > tbody > tr > * {
border-bottom: 1px solid white; /*linha horizontal*/
padding: 0 6px 0 6px;
height: 20px;
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: #DDEBF7;} /*alterna a cor das linhas*/
.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 2px solid white;} /*linhas da colunas*/
.scrollingtable > div:before {
top: 0;
background: #9BC2E6; /*header row background color*/
}
.thead_prop, .tbody_prop{
font-family: 'agroverdana';
font-size:13px;
}
#content{left:1px;border-top:solid 1px #9BC2E6;border-bottom:solid 1px #9BC2E6;flex:1;}
#navbar{padding:3px 4px 3px 2px} /*top | right | bottom | left*/
#navbutton{float:right;}
#vpad-pesq{float:left;}
#searching{margin-left:2px;padding-top:2px;}
#msgbar{border-top:solid 1px #9BC2E6;border-bottom:solid 1px #9BC2E6;height:3%;}
#footer{border-top:solid 1px #9BC2E6;border-top:0;height:5%;}
<!DOCTYPE html>
<!--[if lte IE 9]>
<style>.scrollingtable > div > div > table {margin-right: 17px;}</style>
<![endif]-->
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Central de Controle da Engenharia</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<header style="padding-bottom:5px;text-align:center;">Central de Controle da Engenharia</header>
<section id="content">
<header id="navbar">
<input type="text" id="vpad-pesq"/>
<select id="searching">
<option>Código</option>
<option>Nome</option>
</select>
<div id="navbutton">
<button id="btfirst"></button>
<button id="btprev"></button>
<button id="btnext"></button>
<button id="btlast"></button>
</div>
</header>
</section>
<div class="scrollingtable">
<div>
<div>
<table>
<thead>
<tr>
<th class="thead_prop">
<div label="Código"></div>
</th>
<th class="thead_prop">
<div label="Descrição"></div>
</th>
<th class="scrollbarhead"/>
<!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->
</tr>
</thead>
<tbody>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
<tr class="tbody_prop">
<td>001</td>
<td>Coxa c/ sobrecoxa s/ osso s/ pele</td>
</tr>
</tbody>
</table>
</div>
<!-- pode colocar text aqui -->
</div>
<section id="msgbar"></section>
<footer id="footer">Rodapé</footer>
</div>
</body>
</html>最佳答案
经过一些测试，我发现了问题所在:scrollbarhead 导致了问题。我认为您从某个网站获得了此脚本，并且此表标题添加了您不想要的空白。
我用一个简单的display:none“删除”了它，它正在工作(我还将宽度更改为 100%):
编辑:拖动表格时表格被推到右边的事实是因为您将这个 th 推到了左边。
希望对你有所帮助。
关于html - 如何防止 table 向侧面移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30708532/
24
4
0
这个问题在这里已经有了答案: What is the best way to parse html in C#? [closed] (15 个答案) 关闭 3 年前。 string input =
为什么 wrapper #4 没有继承其父表容器的高度？表格嵌套在一个显示 block 包装器中，每个嵌套的div是显示表格，每个表格继承到最里面的一个。是什么原因造成的，我该如何解决？ jsfidd
我正在使用带有 Bootstrap 的自定义 css 作为外边框。但顶部边框不可见，除非我将其大小设置为 2 px。 我该如何解决这个问题？ HTML #name 1.one 2.two 3.thr
我正在逻辑层面上设计一个数据库，以便稍后将其传递给程序员来交付。我只是粗略地了解它们的工作原理，所以我很难简洁地表达我的问题。这是我的问题: 我有一个名为 MEANINGS 的表。 我有一个名为 WO
在 Laravel 上，我们可以使用 DB::table('table')->get(); 或使用 model::('table')->all() 进行访问;我的问题是它们之间有什么区别？ 谢谢。 最
我试图从以下内容中抓取 URL从 WorldOMeter 获取 CoVid 数据，在此页面上存在一个表，id 为:main_table_countries_today其中包含我希望收集的 15x225
这是我的图表数据库:/image/CGAwh.png 我用 SEQUELIZE 制作了我的数据库模型: 型号:级别 module.exports = (sequelize, DataTypes) =>
我真的不明白为什么我的代码不能按预期工作。当我将鼠标悬停在表格的每一行上时，我想显示一个图像(来 self 之前加载的 JSON)。每个图像根据行的不同而不同，我想将它们显示在表格之外的另一个元素中。
假设我的数据库中有一张地铁 map ，其中每条线路的每个站点都是一行。如果我想知道我的线路在哪里互连: mysql> SELECT LineA.stop_id FROM LineA, LineB WH
我最近经常使用这些属性，尤其是 display: table-cell。它在现代浏览器中得到了很好的支持，并且它对某些网格有很多好处，并且可以非常轻松地对齐内容，而无需棘手的标记。但在过去的几天里，我
在 CSS 中，我可以这样做: http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20
问题作为标题，我正在学习sparkSQL，但我无法很好地理解它们之间的区别。谢谢。 最佳答案 spark.table之间没有区别& spark.read.table功能。 内部 spark.read.
我正在尝试根据 this answer 删除表上的非空约束.但是，它似乎没有在 sqlite_sequence 中创建条目。这样做之后，即使我可以在使用测试表时让它正常工作。 有趣的是，如果我备份我的
var otable = new sap.m.Table();//here table is created //here multiple header I'm trying to create t
下面两种方法有什么区别: 内存 性能 答: select table.id from table B: select a.id from table a 谢谢(抱歉，如果我的问题重复)。 最佳答案 完
我尝试在表格后添加点，方法是使用 table::after 选择器创建一个点元素并使用 margin: 5px auto 5px auto; 将其居中。它有效，但似乎在第一个表格列之后添加了点，而不是
我正在设计一个可以标记任何内容的数据库，我可能希望能够选择带有特定标记的所有内容。 我正在为以下两个选项而苦苦挣扎，希望得到一些建议。如果有更好的方法请告诉我。 选项A 多个“多对多”连接表。 tag
"center" div 中的下表元素导致 "left" div 中的内容从顶部偏移几个像素(在我的浏览器中为 8 ).在表格之前添加一些文本可消除此偏移量。 为什么？如何在不要求在我的表格前添加“虚
我是一名优秀的程序员,十分优秀！