我希望此表遵循可调整大小的面板，但也可以使列可调整大小。 目前，如果我调整面板大小，则该表已超出。 http://jsfiddle.net/ericire/u1Lcd26n/35/ 按一下按钮 聚苯乙烯 有趣的是，我放置了一个链接jsfiddle，并被告知必须放置代码。所以我输入了代码，并被告知代码太多了哈哈哈 所以这是要求的详细信息
编辑：我终于成功了 这是正确的代码
<html>
<head>
<title></title>
</head>
<body>
<div id="map" tabindex="0">
<div id="menu1">
<table class="tab" id="table1">
<tr>
<td><button class="tablinks" id="Par" onclick="menu(event, 'Par')" title="Permet de sélectionner des parcelles du calque parcelles vecteur pour les ajouter au calque Annotations">Par+</button></td>
</tr>
</table>
</div><!-- panneau utilitaire parcellaire -->
<div class="tabContent" id="ParContent">
<div class="titrePanneau" id="titrePanneauParc">
Utilitaire parcellaire
</div>
<div class="" id="attributs_cadre">
<div class="soustitrePanneau" id="attributs">
Attributs
</div>
<div class="tableauAttributs" id="ajoutAttrCav" title="ajouter les attributs caviar">
c
</div>
<div class="tableauAttributs" id="ajoutLigne" title="ajouter une ligne au tableau">
+
</div>
<div class="tableauAttributs" id="ajoutAttrEmp" title="ajouter les attributs du polygone sélectionné">
◄
</div>
<div class="tableauAttributs" id="supprimLignes" title="supprimer le contenu du tableau">
x
</div>
<table id="tableauAttributs">
<thead>
<tr>
<td class="ent">Nom</td>
<td class="ent">Valeur</td>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td class="td"><input type="text"></td>
<td class="td"><input type="text"></td>
</tr>
<tr>
<td class="td"><input type="text"></td>
<td class="td"><input type="text"></td>
</tr>
<tr>
<td class="td"><input type="text"></td>
<td class="td"><input type="text"></td>
</tr>
<tr>
<td class="td"><input type="text"></td>
<td class="td"><input type="text"></td>
</tr>
<tr>
<td class="td"><input type="text"></td>
<td class="td"><input type="text"></td>
</tr>
<tr>
<td class="td"><input type="text"></td>
<td class="td"><input type="text"></td>
</tr>
<tr>
<td class="td"><input type="text"></td>
<td class="td"><input type="text"></td>
</tr>
<tr>
<td class="td"><input type="text"></td>
<td class="td"><input type="text"></td>
</tr>
<tr>
<td class="td"><input type="text"></td>
<td class="td"><input type="text"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
/* Style the tab */
#menu1 {
position: absolute;
top: 70px;
left: 5px;
z-index: 1000;
}
.tab {
background-color: rgba(255, 255, 255, 0.3);
width: 44px;
height: 44px;
}
/* Style the buttons inside the tab */
.tab button {
position: relative;
display: block;
background-color: rgba(235, 107, 10, 1);
color: #4d2e00;
padding: 8px 1px 8px 1px;
width: 34px;
border: 1px;
border-radius: 5px;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.3s;
font-family: Rubik;
font-size: 13px;
font-weight: 900;
font-style: normal;
color: white;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: rgba(196, 89, 8, 0.8);
color: white;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: rgba(122, 56, 5, 0.8);
color: white;
}
/* pour enlever le focus du bouton */
button::-moz-focus-inner {
border: 0;
}
#ParContent {
position: absolute;
top: 70px;
left: 42px;
height: 390px;
width: 220px;
background-color: white;
color: white;
border-radius: 4px;
box-shadow: 2px 2px 4px 1px #999;
visibility: hidden;
z-index: 1000;
}
.titrePanneau {
height: 20px;
font-weight: 700;
background-color: #6a360d;
padding-left: 2px;
text-align: center;
}
.soustitrePanneau {
font-weight: 700;
background-color: gray;
text-align: center;
}
/* panneau utilitaire parcellaire #ParContent*/
#attributs_cadre {
position: absolute;
top: 30px;
border: 1px solid black;
left: 2px;
width: 310px;
padding: 2px;
height: 187px;
}
#type, #attributs {
height: 20px;
font-weight: 700;
background-color: gray;
text-align: center;
}
#ajoutAttrCav {
position: absolute;
top: 1px;
right: 52px;
height: 20px;
width: 10px;
text-align: center;
color: white;
text-decoration-line: none;
font-family: arial;
font-size: 18px;
cursor: pointer;
}
#ajoutLigne {
position: absolute;
top: 1px;
right: 35px;
height: 20px;
width: 10px;
text-align: center;
color: white;
text-decoration-line: none;
font-family: arial;
font-size: 20px;
cursor: pointer;
}
#ajoutAttrEmp {
position: absolute;
top: 2px;
right: 15px;
height: 20px;
width: 20px;
text-align: center;
color: white;
text-decoration-line: none;
font-family: arial;
font-size: 16px;
cursor: pointer;
}
#supprimLignes {
position: absolute;
top: 1px;
right: 4px;
height: 20px;
width: 10px;
text-align: center;
color: white;
text-decoration-line: none;
font-family: arial;
cursor: pointer;
}
#tableauAttributs {
position: absolute;
width: 350px;
top: 24px;
border: 1px solid black;
border-spacing: 0px;
}
#tableauAttributs tr .ent {
border: 1px solid white;
text-align: center;
}
#tableauAttributs tbody {
display: block;
max-height: 134px;
overflow-y: auto;
overflow-x: hidden;
}
#tableauAttributs input {
width: 100%
}
#tableauAttributs thead, tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
#tableauAttributs tbody {
display: block;
padding: 1px;
}
#tableauAttributs tbody tr {
width: calc(100% - 3px);
}
#tableauAttributs thead {
background: #b3b3b3;
}
$(function() {
$("#ParContent").resizable({
handles: 'e',
minWidth: 320,
alsoResize: "#attributs_cadre"
}).on("resize", function() {
//le tableau
var cadre = $("#attributs_cadre").width()
document.querySelector('#tableauAttributs').style.width = cadre + 'px';
//les entetes
document.querySelector('#tableauAttributs thead').style.width = cadre - 19 + 'px';
});
});
function menu(evt) {
var i, tabcontent, tablinks, menu;
tablinks = document.getElementsByClassName("tablinks");
tabcontent = document.getElementsByClassName("tabContent");
menu = document.getElementById(evt.currentTarget.id + 'Content');
var bouton = document.getElementById(evt.currentTarget.id);
var pos = getPosition('Par');
var larg = bouton.offsetWidth;
// changer apparence bouton
if (evt.currentTarget.className === "tablinks active") { //si bouton actif
evt.currentTarget.className = "tablinks"; //desactive boutton
menu.style.visibility = 'hidden'; //on masque le menu
} else {
//on remets le tableau initial
const element = document.querySelector('#attributs_cadre')
const Cadre_width = element.style.width
if (Cadre_width != 310) {
element.style.width = '310px';
document.querySelector("#tableauAttributs").style.width = '310px';
document.querySelector("#tableauAttributs thead").style.width = '291px';
}
for (i = 0; i < tablinks.length; i++) {;
tablinks[i].className = 'tablinks'; //on desactive tous les boutons
tabcontent[i].style.visibility = 'hidden'; //on masque tous les menus
};
evt.currentTarget.className = "tablinks active"; //puis on active le bouton
var style = style = window.getComputedStyle(menu);
menu.style.visibility = 'visible'; //on affiche ce menu et actualise le css
menu.style.position = style.getPropertyValue('position');
menu.style.top = pos[1] + 'px';
menu.style.left = (pos[0] + larg + 2) + 'px';
menu.style.height = style.getPropertyValue('height');
if (evt.currentTarget.id == 'Par') {
menu.style.width = '320px'
} else {
menu.style.width = style.getPropertyValue('width');
}
menu.style.backgroundColor = style.getPropertyValue('backgroundColor');
menu.style.color = style.getPropertyValue('color');
menu.style.borderRadius = style.getPropertyValue('borderRadius');
menu.style.boxShadow = style.getPropertyValue('boxShadow');
menu.style.zIndex = style.getPropertyValue('zIndex');
};
};
/**
* gestion des boutons pour afficher le menu
* @param evt: l'evenement du click
*
* @returns affiche le menu
*/
//pour activer les clics boutons menus
window.onload = function() {
menu(evt);
document.getElementById(this.id).onclick = menu;
}
document.getElementById("Par").onclick = menu;
function getPosition(Id) {
console.trace('getPosition(Id)')
var left = 0;
var top = 0;
//On récupère l'élément
var e = document.getElementById(Id);
console.log("e", e)
//Tant que l'on a un élément parent
while (e.offsetParent != undefined && e.offsetParent != null) {
//On ajoute la position de l'élément parent
left += e.offsetLeft + (e.clientLeft != null ? e.clientLeft : 0);
top += e.offsetTop + (e.clientTop != null ? e.clientTop : 0);
e = e.offsetParent;
}
return new Array(left, top);
};
答案 0 :(得分：0)
使用以下内容更改您的js代码。
$(function() {
$("#ParContent").resizable({
handles: 'e',
minWidth: 290,
alsoResize: "#attributs_cadre,#tableauAttributs,#tableauAttributs input,#tableauAttributs thead"
});
});
function menu(evt) {
var i, tabcontent, tablinks, menu;
tablinks = document.getElementsByClassName("tablinks");
tabcontent = document.getElementsByClassName("tabContent");
menu = document.getElementById(evt.currentTarget.id + 'Content');
var bouton = document.getElementById(evt.currentTarget.id);
var pos = getPosition('Par');
var larg = bouton.offsetWidth;
// changer apparence bouton
if (evt.currentTarget.className === "tablinks active") { //si bouton actif
evt.currentTarget.className = "tablinks"; //desactive boutton
menu.style.visibility = 'hidden'; //on masque le menu
} else {
const element = document.querySelector('#attributs_cadre')
const Cadre_width = element.style.width
if(Cadre_width != 310){
element.style.width = '310px';
document.querySelector("#tableauAttributs").style.width = '310px';
document.querySelector("#tableauAttributs thead").style.width = '310px';
}
for (i = 0; i < tablinks.length; i++) {
;
tablinks[i].className = 'tablinks'; //on desactive tous les boutons
tabcontent[i].style.visibility = 'hidden'; //on masque tous les menus
};
evt.currentTarget.className = "tablinks active"; //puis on active le bouton
var style = style = window.getComputedStyle(menu);
menu.style.visibility = 'visible'; //on affiche ce menu et actualise le css
menu.style.position = style.getPropertyValue('position');
menu.style.top = pos[1] + 'px';
menu.style.left = (pos[0] + larg + 2) + 'px';
menu.style.height = style.getPropertyValue('height');
if (evt.currentTarget.id == 'Par') {
menu.style.width = '320px'
} else {
menu.style.width = style.getPropertyValue('width');
}
menu.style.backgroundColor = style.getPropertyValue('backgroundColor');
menu.style.color = style.getPropertyValue('color');
menu.style.borderRadius = style.getPropertyValue('borderRadius');
menu.style.boxShadow = style.getPropertyValue('boxShadow');
menu.style.zIndex = style.getPropertyValue('zIndex');
};
};
/**
* gestion des boutons pour afficher le menu
* @param evt: l'evenement du click
*
* @returns affiche le menu
*/
//pour activer les clics boutons menus
window.onload = function() {
menu(evt);
document.getElementById(this.id).onclick = menu;
}
document.getElementById("Par").onclick = menu;
function getPosition(Id) {
console.trace('getPosition(Id)')
var left = 0;
var top = 0;
//On récupère l'élément
var e = document.getElementById(Id);
console.log("e", e)
//Tant que l'on a un élément parent
while (e.offsetParent != undefined && e.offsetParent != null) {
//On ajoute la position de l'élément parent
left += e.offsetLeft + (e.clientLeft != null ? e.clientLeft : 0);
top += e.offsetTop + (e.clientTop != null ? e.clientTop : 0);
e = e.offsetParent;
}
return new Array(left, top);
};
和CSS代码
/* Style the tab */
#menu1 {
position: absolute;
top: 70px;
left: 5px;
z-index: 1000;
}
.tab {
background-color: rgba(255, 255, 255, 0.3);
width: 44px;
height: 44px;
}
/* Style the buttons inside the tab */
.tab button {
position: relative;
display: block;
background-color: rgba(235, 107, 10, 1);
color: #4d2e00;
padding: 8px 1px 8px 1px;
width: 34px;
border: 1px;
border-radius: 5px;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.3s;
font-family: Rubik;
font-size: 13px;
font-weight: 900;
font-style: normal;
color: white;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: rgba(196, 89, 8, 0.8);
color: white;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: rgba(122, 56, 5, 0.8);
color: white;
}
/* pour enlever le focus du bouton */
button::-moz-focus-inner {
border: 0;
}
#ParContent {
position: absolute;
top: 70px;
left: 42px;
height: 390px;
width: 220px;
background-color: white;
color: white;
border-radius: 4px;
box-shadow: 2px 2px 4px 1px #999;
visibility: hidden;
z-index: 1000;
}
.titrePanneau {
height: 20px;
font-weight: 700;
background-color: #6a360d;
padding-left: 2px;
text-align: center;
}
.soustitrePanneau {
font-weight: 700;
background-color: gray;
text-align: center;
}
/* panneau utilitaire parcellaire #ParContent*/
#attributs_cadre {
position: absolute;
top: 30px;
border: 1px solid black;
left: 2px;
width: 310px;
padding: 2px;
height: 187px;
}
#type,
#attributs {
height: 20px;
font-weight: 700;
background-color: gray;
text-align: center;
}
#ajoutAttrCav {
position: absolute;
top: 1px;
right: 52px;
height: 20px;
width: 10px;
text-align: center;
color: white;
text-decoration-line: none;
font-family: arial;
font-size: 18px;
cursor: pointer;
}
#ajoutLigne {
position: absolute;
top: 1px;
right: 35px;
height: 20px;
width: 10px;
text-align: center;
color: white;
text-decoration-line: none;
font-family: arial;
font-size: 20px;
cursor: pointer;
}
#ajoutAttrEmp {
position: absolute;
top: 2px;
right: 15px;
height: 20px;
width: 20px;
text-align: center;
color: white;
text-decoration-line: none;
font-family: arial;
font-size: 16px;
cursor: pointer;
}
#supprimLignes {
position: absolute;
top: 1px;
right: 4px;
height: 20px;
width: 10px;
text-align: center;
color: white;
text-decoration-line: none;
font-family: arial;
cursor: pointer;
}
#tableauAttributs {
position: absolute;
width: 290px;
top: 24px;
border: 1px solid black;
border-spacing: 0px;
border-collapse: collapse;
}
#tableauAttributs tr .ent {
border: 1px solid white;
text-align: center;
}
#tableauAttributs tbody {
display: block;
max-height: 134px;
overflow-y: scroll;
}
#tableauAttributs input {
/*box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
*/
}
#tableauAttributs tbody .td {
width: 50%;
}
#tableauAttributs{ width:100%; }
#tableauAttributs thead{
display: table;
width: 100%;
table-layout: fixed;
}
#tableauAttributs tbody tr{
display: table;
width: 103%;
table-layout: fixed;
}
#tableauAttributs td {
width: 90%;
}
#tableauAttributs thead {
max-width:400px;
max-height:22px;
background: #b3b3b3;
}