根据截图,请指导我如何开始从页面顶部的表格标题。
分享下面代码的一些摘录。
此外,@media查询在Iphone中不能正常工作。我检查了一台安卓设备,它工作起来非常棒。我试过iPhone7。
#emails {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#emails td,
#emails th {
border: 1px solid #ddd;
padding: 8px;
}
#emails tr:nth-child(even) {
background-color: #f2f2f2;
}
#emails tr:hover {
background-color: #ddd;
}
#emails th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
#emails2 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#emails2 td,
#emails th {
border: 1px solid #ddd;
padding: 8px;
}
#emails2 tr:nth-child(even) {
background-color: #f2f2f2;
}
#emails2 tr:hover {
background-color: #ddd;
}
#emails2 th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
#emails2 table,
#emails2 thead,
#emails2 tbody,
#emails2 th,
#emails2 td,
#emails2 tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#emails2 th {
position: absolute;
top: -9999px;
left: -9999px;
}
#emails2 tr {
border: 1px solid #ccc;
}
#emails2 td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
#emails2 td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
#emails2 td:nth-of-type(1):before {
content: "Domain";
}
#emails2 td:nth-of-type(2):before {
content: "Email";
}
#emails2 td:nth-of-type(3):before {
content: "Login";
}
#emails2 td:nth-of-type(4):before {
content: "User";
}
#emails2 td:nth-of-type(5):before {
content: "Disk Quota";
}
#emails2 td:nth-of-type(6):before {
content: "Disk Used";
}
#emails2 td:nth-of-type(7):before {
content: "Used Percentage";
}
#emails2 td:nth-of-type(8):before {
content: "Delete";
}
#emails2 td:nth-of-type(9):before {
content: "Change Password";
}
}
input[type=text],
input[type=password] {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 6px 10px;
margin: 3px 0;
box-sizing: border-box;
}
input[type=button],
input[type=Submit],
input[type=reset] {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background-color: #4CAF50;
border: none;
color: white;
padding: 6px 10px;
text-decoration: none;
margin: 3px 2px;
cursor: pointer;
<pre>
<style>...</style>
<title>...</title>
<meta/>
<meta/>
<table id="emails">
<tr class="tableheader">
<th align="center"><u>User Dashboard</u></th>
</tr>
</table>
</pre>
发布于 2018-07-22 00:33:14
根据your screenshot的说法,您的table
-s位于pre
标记内。pre
标签在源HTML文件中保留换行符(默认情况下)并显示它们。
在HTML代码中,在第一个表之前有许多换行符(可能在style
内部、title
和多个meta
标记之后),它们会导致表上方出现白色间隙。
解决方案:不要将元素放在pre
标记中。
https://stackoverflow.com/questions/51456554
复制相似问题