Блог

Ниже приведена кнопка some javascript, которую я написал, чтобы скрыть/показать таблицу. По умолчанию таблица центрирована с полями: авто, и это работает.

Но всякий раз, когда я нажимаю кнопку, чтобы скрыть/показать таблицу, она сбрасывает автоматические поля и выравнивает таблицу по левому краю.

Если я отключу отображение:нет, он будет отображаться по центру таблицы, а если я удалю javascript, он будет отображаться нормально. Я попытался установить его снова с помощью

 document.getElementById("vcontrols").style.margin = "0 auto"  

Но это не работает

Вот используемый CSS.

 lt;stylegt;  body {  background-color: #111;  }   .container {  max-width: 80%;  margin: auto;  background: #333;  color: #fff;  text-align: center;  }   .tabela {  margin: 0 auto;  }   #vcontrols {  display: none;  } lt;/stylegt;  

Вот сценарий

 function toggleControls() {  var Skrivalica = document.getElementById('vcontrols');  var displaySetting = Skrivalica.style.display;  var hideshow = document.getElementById('hideshow');   if (displaySetting == 'block') {  Skrivalica.style.display = 'none';  hideshow.innerHTML = 'Full Details';  }  else {  Skrivalica.style.display = 'block';  hideshow.innerHTML = 'Hide Details';  }  }  

И вот основная часть, таблица

 lt;div class="container"gt;  lt;button onclick="toggleControls()" id="hideshow"gt;Full Detailslt;/buttongt;  lt;table class="tabela" id="vcontrols"gt;  lt;trgt;  lt;thgt;Action 1lt;/thgt;  lt;thgt;Action 2lt;/thgt;  lt;thgt;Action 3lt;/thgt;  lt;thgt;Action 4lt;/thgt;  lt;thgt;Action 5lt;/thgt;  lt;/trgt;  lt;trgt;  lt;tdgt;Item 1lt;/tdgt;  lt;tdgt;Item 2lt;/tdgt;  lt;tdgt;Item 3lt;/tdgt;  lt;tdgt;Item 4lt;/tdgt;  lt;tdgt;Item 5lt;/tdgt;  lt;/trgt;  lt;/tablegt;  lt;/divgt;  

 function toggleControls() {  var Skrivalica = document.getElementById('vcontrols');  var displaySetting = Skrivalica.style.display;  var hideshow = document.getElementById('hideshow');    if (displaySetting === 'block') {  Skrivalica.style.display = 'none';  hideshow.textContent = 'Full Details';  }  else {  Skrivalica.style.display = 'block';  hideshow.textContent = 'Hide Details';  } } 

 body {  background-color: #111;   }    .btn-container {  display: flex;  justify-content: center;  }   .container {  max-width: 80%;  margin-left: auto;  margin-right: auto;  background: #333;  color: #fff;  text-align: center;  display: flex;  }   .tabela {  margin: 0 auto;  }   #vcontrols {  display: none;  } 

 lt;div class="btn-container"gt;  lt;button onclick="toggleControls()" id="hideshow"gt;Full Detailslt;/buttongt;  lt;/divgt;  lt;div class="container"gt;  lt;table class="tabela" id="vcontrols"gt;  lt;trgt;  lt;thgt;Action 1lt;/thgt;  lt;thgt;Action 2lt;/thgt;  lt;thgt;Action 3lt;/thgt;  lt;thgt;Action 4lt;/thgt;  lt;thgt;Action 5lt;/thgt;  lt;/trgt;  lt;trgt;  lt;tdgt;Item 1lt;/tdgt;  lt;tdgt;Item 2lt;/tdgt;  lt;tdgt;Item 3lt;/tdgt;  lt;tdgt;Item 4lt;/tdgt;  lt;tdgt;Item 5lt;/tdgt;  lt;/trgt;  lt;/tablegt; lt;/divgt; 

Может быть, более простой способ, но я изменил некоторые HTML и CSS. Оставил JS в покое. Похоже, это работало на меня. Дай мне знать, если это не то, что ты хотел!