CSS：不重新缩放“表”的显示元素

时间：2017-06-04 15:43:23

标签： html css

我试图在点击图像后在我的表格中显示一个元素而不调整此元素的大小。但显然行的大小更大。 

var lastelementmenu;
    var event_cache_site = document.querySelector('.event_cache_site');
    var properties = document.querySelectorAll(".event_list_view_properties_click");//3 points
    for(var i= 0 ;i<properties.length;i++){
        //evenement au click
        properties[i].addEventListener('click',function(e){
            var div = this.nextElementSibling;
            lastelementmenu = div;
            div.style.display = "block";
            event_cache_site.style.display = "block";
        });
    }
    event_cache_site.addEventListener('click', () => {
        lastelementmenu.style.display = "none";
        event_cache_site.style.display = "none";
    });
*{
    font-size:16px;
      box-sizing: border-box;
}
html{
    font-size:50%;
    background-color: #f5f5f5;
}
.event_list_view{
 
    width: 150rem;
    margin: 5rem auto;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    font-size: 1.5rem;
}
.event_list_view tbody{
    background-color: #fff;
}
.event_list_view thead tr{
    border-bottom: 0px solid rgba(0,0,0,0.54);
    box-shadow: 0 -1px 0 rgba(0,0,0,0.12) inset;

} 
.event_list_view_array{
    width: 100%;
    border-collapse: collapse;
}
.event_list_view_cell{
    padding: 3rem 2rem;
}
.event_list_view_array thead{
    /*background-color: #f5f5f5;*/
     background-color: transparent;
}
.event_list_view_array thead th{
    color: rgba(0,0,0,0.54);
    font-weight: normal;
    font-family: Roboto,"Helvetica Neue",sans-serif   
}
.event_list_view_new{
    background: rgb(3, 155, 229);
    float: right;
    margin : 1rem ;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.event_list_view_new p{
    padding: 0rem 1rem;
}
.event_list_view_new a{
    text-decoration: none;
    color: #FFF;
   
}
.event_list_view_legend{
    padding: 1rem 2rem;
    text-align: left;
}
.event_list_view_properties{
    background-color: #fff;
    display: none;
    z-index: 17;
    position: relative;
    top: -5rem;
    padding: 0rem 1rem;
    left: -7rem;
    width: 10rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}
.event_list_view_properties ul {
    list-style-type: none;
    margin: 0rem 0rem;
    padding: 0rem;
}
.event_list_view_properties li {
    padding: 0.5rem 0rem;
}
.event_list_view_properties a {
    text-decoration: none;
    color: rgba(0,0,0,0.5);
    margin: 1rem 0rem;
}
.event_list_view_properties_bg{/*
    background-image: url(../images/icon/properties.svg);
    width: 10rem;
    height: 5rem;*/
}
.event_cache_site{
    z-index: 14;
    position: fixed;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
    background: none;
}
<html>
<table class="event_list_view_array">
	<thead>
		<tr>
			<th colspan="5"><div class="event_list_view_new"><a href="?state=new"><p >NOUVEL EVENEMENT</p></a></div></th>
		<tr>
		<tr>
			<th><div class="event_list_view_legend">Titre</div></th>
			<th><div class="event_list_view_legend">Contenu</div></th>
			<th><div class="event_list_view_legend">Date</div></th>
			<th><div class="event_list_view_legend">Groupe</div></th>
			<th><div class="event_list_view_legend"></div></th>
		</tr>
	</thead>
	<tbody>               
		<col span="1" style="width: 15%;">
		<col span="1" style="width: 60%;">
		<col span="1" style="width: 15%;">
		<col span="1" style="width: 5%;">
		<col span="1" style="width: 5%;">';
		 <tr>
			<td><div class="event_list_view_cell"> title0 </div></td>
			<td><div class="event_list_view_cell">content0</div></td>
			<td><div class="event_list_view_cell">2017-05-11 11:00:00</div></td>
			<td><div class="event_list_view_cell">A</div></td>
			<td>
				<div class="event_list_view_cell event_list_view_properties_click" >
					<img src="images/icon/properties.svg" alt="properties">
				</div>
				<div class="event_list_view_cell event_list_view_properties">
					<ul>
						<li><a href="#">Modifier</a></li>
						<li><a href="#">supprimer</a></li>
					</ul>
				</div>
			</td>
		</tr>
		<tr>
			<td><div class="event_list_view_cell"> title1 </div></td>
			<td><div class="event_list_view_cell">content1</div></td>
			<td><div class="event_list_view_cell">2017-05-11 11:00:00</div></td>
			<td><div class="event_list_view_cell">A</div></td>
			<td>
				<div class="event_list_view_cell event_list_view_properties_click" >
					<img src="images/icon/properties.svg" alt="properties">
				</div>
				<div class="event_list_view_cell event_list_view_properties">
					<ul>
						<li><a href="#">Modifier</a></li>
						<li><a href="#">supprimer</a></li>
					</ul>
				</div>
			</td>
		</tr>
		<tr>
			<td><div class="event_list_view_cell"> title2 </div></td>
			<td><div class="event_list_view_cell">content2</div></td>
			<td><div class="event_list_view_cell">2017-05-11 11:00:00</div></td>
			<td><div class="event_list_view_cell">A</div></td>
			<td>
				<div class="event_list_view_cell event_list_view_properties_click" >
					<img src="images/icon/properties.svg" alt="properties">
				</div>
				<div class="event_list_view_cell event_list_view_properties">
					<ul>
						<li><a href="#">Modifier</a></li>
						<li><a href="#">supprimer</a></li>
					</ul>
				</div>
			</td>
		</tr>
	</tbody>
</table>
<div class="event_cache_site" style="display:none;"></div>
</html>

After clicking 我该如何解决？ 感谢

1 个答案:

答案 0 :(得分：0)

改为使用position: absolute，并将position: relative添加到td父级。您可能需要调整top和left/right以将菜单移动到所需的位置。

＆＃13;
＆＃13; 
var lastelementmenu;
    var event_cache_site = document.querySelector('.event_cache_site');
    var properties = document.querySelectorAll(".event_list_view_properties_click");//3 points
    for(var i= 0 ;i<properties.length;i++){
        //evenement au click
        properties[i].addEventListener('click',function(e){
            var div = this.nextElementSibling;
            lastelementmenu = div;
            div.style.display = "block";
            event_cache_site.style.display = "block";
        });
    }
    event_cache_site.addEventListener('click', () => {
        lastelementmenu.style.display = "none";
        event_cache_site.style.display = "none";
    });
＆＃13; 
*{
    font-size:16px;
      box-sizing: border-box;
}
html{
    font-size:50%;
    background-color: #f5f5f5;
}
.event_list_view{
 
    width: 150rem;
    margin: 5rem auto;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    font-size: 1.5rem;
}
.event_list_view tbody{
    background-color: #fff;
}
.event_list_view thead tr{
    border-bottom: 0px solid rgba(0,0,0,0.54);
    box-shadow: 0 -1px 0 rgba(0,0,0,0.12) inset;

} 
.event_list_view_array{
    width: 100%;
    border-collapse: collapse;
}
.event_list_view_cell{
    padding: 3rem 2rem;
}
.event_list_view_array thead{
    /*background-color: #f5f5f5;*/
     background-color: transparent;
}
.event_list_view_array thead th{
    color: rgba(0,0,0,0.54);
    font-weight: normal;
    font-family: Roboto,"Helvetica Neue",sans-serif   
}
.event_list_view_new{
    background: rgb(3, 155, 229);
    float: right;
    margin : 1rem ;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.event_list_view_new p{
    padding: 0rem 1rem;
}
.event_list_view_new a{
    text-decoration: none;
    color: #FFF;
   
}
.event_list_view_legend{
    padding: 1rem 2rem;
    text-align: left;
}
.event_list_view_properties{
    background-color: #fff;
    display: none;
    z-index: 17;
    position: absolute;
    top: 50%;
    padding: 0rem 1rem;
    right: 70%;
    width: 10rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}
.event_list_view_properties ul {
    list-style-type: none;
    margin: 0rem 0rem;
    padding: 0rem;
}
.event_list_view_properties li {
    padding: 0.5rem 0rem;
}
.event_list_view_properties a {
    text-decoration: none;
    color: rgba(0,0,0,0.5);
    margin: 1rem 0rem;
}
.event_list_view_properties_bg{/*
    background-image: url(../images/icon/properties.svg);
    width: 10rem;
    height: 5rem;*/
}
.event_cache_site{
    z-index: 14;
    position: fixed;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
    background: none;
}

td {
  position: relative;
}
＆＃13; 
<html>
<table class="event_list_view_array">
	<thead>
		<tr>
			<th colspan="5"><div class="event_list_view_new"><a href="?state=new"><p >NOUVEL EVENEMENT</p></a></div></th>
		<tr>
		<tr>
			<th><div class="event_list_view_legend">Titre</div></th>
			<th><div class="event_list_view_legend">Contenu</div></th>
			<th><div class="event_list_view_legend">Date</div></th>
			<th><div class="event_list_view_legend">Groupe</div></th>
			<th><div class="event_list_view_legend"></div></th>
		</tr>
	</thead>
	<tbody>               
		<col span="1" style="width: 15%;">
		<col span="1" style="width: 60%;">
		<col span="1" style="width: 15%;">
		<col span="1" style="width: 5%;">
		<col span="1" style="width: 5%;">';
		 <tr>
			<td><div class="event_list_view_cell"> title0 </div></td>
			<td><div class="event_list_view_cell">content0</div></td>
			<td><div class="event_list_view_cell">2017-05-11 11:00:00</div></td>
			<td><div class="event_list_view_cell">A</div></td>
			<td>
				<div class="event_list_view_cell event_list_view_properties_click" >
					<img src="images/icon/properties.svg" alt="properties">
				</div>
				<div class="event_list_view_cell event_list_view_properties">
					<ul>
						<li><a href="#">Modifier</a></li>
						<li><a href="#">supprimer</a></li>
					</ul>
				</div>
			</td>
		</tr>
		<tr>
			<td><div class="event_list_view_cell"> title1 </div></td>
			<td><div class="event_list_view_cell">content1</div></td>
			<td><div class="event_list_view_cell">2017-05-11 11:00:00</div></td>
			<td><div class="event_list_view_cell">A</div></td>
			<td>
				<div class="event_list_view_cell event_list_view_properties_click" >
					<img src="images/icon/properties.svg" alt="properties">
				</div>
				<div class="event_list_view_cell event_list_view_properties">
					<ul>
						<li><a href="#">Modifier</a></li>
						<li><a href="#">supprimer</a></li>
					</ul>
				</div>
			</td>
		</tr>
		<tr>
			<td><div class="event_list_view_cell"> title2 </div></td>
			<td><div class="event_list_view_cell">content2</div></td>
			<td><div class="event_list_view_cell">2017-05-11 11:00:00</div></td>
			<td><div class="event_list_view_cell">A</div></td>
			<td>
				<div class="event_list_view_cell event_list_view_properties_click" >
					<img src="images/icon/properties.svg" alt="properties">
				</div>
				<div class="event_list_view_cell event_list_view_properties">
					<ul>
						<li><a href="#">Modifier</a></li>
						<li><a href="#">supprimer</a></li>
					</ul>
				</div>
			</td>
		</tr>
	</tbody>
</table>
<div class="event_cache_site" style="display:none;"></div>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题