我有一些html,其中包含一些文本和一个表格,但是表格覆盖了文本。我可以使用margin-top:1100px;在tablecontainer上,但这在浏览器和屏幕大小之间是不恒定的。我试过将位置更改为绝对或固定等,但确定有一个简单的解决方案?注意,问题似乎是与转换
html,
body {
height: 100%;
margin: 0;
font-family: sans-serif;
font-weight: 100;
}
.tablecontainer {
position: relative;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: -webkit-linear-gradient(45deg, #49a09d, #5f2c82);
background: linear-gradient(45deg, #49a09d, #5f2c82);
}
.container {
position: absolute;
top: 50%;
left: 50%;
}
table {
border-collapse: collapse;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 45px;
}
th,
td {
padding: 15px;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
th {
text-align: left;
}
thead th {
background-color: #55608f;
}
tbody tr:hover {
background-color: rgba(255, 255, 255, 0.3);
}
tbody td {
position: relative;
}
tbody td:hover:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -9999px;
bottom: -9999px;
background-color: rgba(255, 255, 255, 0.2);
z-index: -1;
}
.center {
border: 0px;
margin: auto;
width: 50%;
padding: 10px;
}
#title {
margin: 0 auto;
text-align: center;
width: 100%;
font-family: 'Comic Sans MS';
color: #41cb97;
font-size: 42px;
padding-top: 60px;
}
<div id="title">
title
</div>
<div class="center">
<p>
blar blar blar
</p>
<p>
blar blar blar
</p>
<p>
blar blar blar
</p>
<p>
blar blar blar
</p>
<p>
blar blar blar
</p>
<div class="tablecontainer">
<table>
<thead>
<tr>
<th align="left" width="30%">Product</th>
<th align="left" width="30%">class 1</th>
<th width="5%">Price</th>
<th align="left" width="30%">class 2</th>
<th width="5%">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th align="left"> blar blar blar</td>
<td align="left"> blar blar blar</td>
<td>2</td>
<td align="left"> blar blar blar</td>
<td>2</td>
</tr>
<tr>
<th align="left"> blar blar blar</td>
<td align="left"> blar blar blar</td>
<td>1.5</td>
<td align="left"> blar blar blar</td>
<td>1.6</td>
</tr>
<tr>
<th align="left">blar blar blar</td>
<td align="left">blar blar blar</td>
<td>0.55</td>
<td align="left">blar blar blar</td>
<td>1.5</td>
</tr>
</tbody>
</table>
<img src="images/prices.png">
1条答案
按热度按时间mlmc2os51#
使用HTML语义,换句话说,使用
<h1>
而不是<div id=title>
。尽可能少地调整默认布局(内联与块)以实现您所追求的。这意味着尽可能少地使用position: absolute
或relative
。