gpt4 book ai didi

html - 单击按钮时表格行变宽

转载 作者:行者123 更新时间:2023-11-28 00:48:34 24 4
gpt4 key购买 nike

我的 HTML 网络日历原型(prototype)有一个奇怪的问题。

我正在使用 bootstrap4 并创建了一个带有“时间按钮”的表格,用户可以选择该表格。

每次当我点击一个随机的时间按钮时,超过 3 个“时间按钮”的表格(当有溢出时)变得更宽。我不想要那种效果。

jsfiddle:https://jsfiddle.net/gdwujum4/

有人可以解释为什么会这样吗?我错过了什么吗?

<!DOCTYPE html>
<html lang="en">
<head>
<title>test.html</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<style>


.topcorner{
top: 0px;
right: 4px;
/* position: absolute; */
cursor:pointer;
}
.list-group{
height: 100px;
/* max-width: 90%; */
overflow-y: auto;
}


td {

background-color: lightgrey;
height : 130px;
max-width: 130px;
}

button {
min-height: 33% ;
max-height: 33% ;
margin-bottom: 0px;


}

</style>
<script type= "application/javascript">

$(document).ready(function(){

$( ".topcorner" ).on( "click", function ( e ) {
e.metaKey = true;

$(this).toggleClass("ui-selected");
$(this).parent().css( "background-color", "red" );

$( "button.list-group-item" ).each(function( index ) {
$(this).removeClass("active");

});


} );



//$( "li" ).on( "click", function ( e ) {
//funktioniert auch mit zukünftigen elementen
$(document).on("click","button.list-group-item",function(e){
e.metaKey = true;

$(this).toggleClass("active");

$( ".topcorner.ui-selected" ).each(function( index ) {
$(this).removeClass("ui-selected");

});

} );

}); </script>

</head>
<body>

<div class="container-fluid mx-0 px-0 mx-md-auto px-md-auto" style="max-width:911px">
<table class="table table-bordered" >


<thead>
<tr>
<th colspan="1" class="text-center">&larr;</th>
<th colspan="5" class="text-center">Februar 2018</th>
<th colspan="1" class="text-center">&rarr;</th>
</tr>
</thead>

<thead>
<tr>
<th class="text-center">Mo</th>
<th class="text-center">Di</th>
<th class="text-center">Mi</th>
<th class="text-center">Do</th>
<th class="text-center">Fr</th>
<th class="text-center">Sa</th>
<th class="text-center">So</th>
</tr>
</thead>
<tbody>

<!-- Woche 1-->
<tr>

<td class="position-relative"></td>
<td class="position-relative"></td>
<td class="position-relative"></td>
<td class="position-relative"></td>
<td class="position-relative"></td>
<td class="position-relative"></td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">1</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>

</tr>

<!-- Woche 2-->
<tr>

<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">2</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">17:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">19:00</button>
</div>
</td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">3</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">18:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">20:00</button>
</div>
</td>



<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">4</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">5</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">6</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>



<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">7</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>


<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">8</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

</tr>

<!-- Woche 3-->
<tr>


<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">9</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">10</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>



<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">11</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">12</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">13</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>



<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">14</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>


<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">15</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

</tr>

<!-- Woche 4-->
<tr>


<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">16</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">17</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>



<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">18</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">19</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">20</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>



<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">21</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>


<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">22</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>



</tr>

<!-- Woche 5-->
<tr>


<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">23</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">24</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>



<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">25</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">26</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">27</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>



<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">28</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>


<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">29</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>


</tr>

<!-- Woche 6-->
<tr>

<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">30</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>


<td class="position-relative px-2 py-0">
<div class="position-absolute topcorner">31</div>

<div class="list-group text-center mt-4 mb-0">
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0" disabled>12:59</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">13:00</button>
<button type="button" class="list-group-item list-group-item-action pt-0 pb-0 pr-0 pl-0">15:00</button>
</div>
</td>

<td class="position-relative"></td>
<td class="position-relative"></td>
<td class="position-relative"></td>
<td class="position-relative"></td>
<td class="position-relative"></td>



</tr>




</tbody>
</table>
</div>

</body>
</html>

最佳答案

您需要覆盖 Bootstrap 大纲...

https://jsfiddle.net/t0cnfp9k/2/

button.list-group-item.active,
button.list-group-item:focus{
outline: 0;
}

关于html - 单击按钮时表格行变宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48807140/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com