Центрировать верхнюю часть в HTML-таблице - PullRequest
Новая
       19

Центрировать верхнюю часть в HTML-таблице

0 голосов
/ 17 июня 2019

У меня есть HTML-таблица, содержимое которой собирается из API с использованием Javascript. Я пытаюсь центрировать текст в верхнем ряду моей HTML-таблицы (таблица находится в модальном окне), и он просто не будет центрироваться. Он всегда остается на левой стороне. 

if (data.foods) {
  //here is the top row->  var div = "<tr><th>" + data.foods[0].food.desc.name + "</th></tr>" + "<tr><td>Nutrition Facts</th><td>per 100gr</td></tr>";
  data.foods[0].food.nutrients.map(nutrients => {
        let tableList = "<tr><td>" + nutrients.name + ": " + "</td><td>" + nutrients.value + nutrients.unit + "</td></tr>";
        div += tableList;
        nutrientData.innerHTML = div;
        //modal 
        var modal = document.getElementById("modal");
        var span = document.getElementsByClassName("close")[0];
        modal.style.display = "block";
        span.onclick = function() {
          modal.style.display = "none";
        }
/* modal content-box */

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 10px;
  border: 1px solid #888;
  width: 20vw;
  height: 70%;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  text-align: center;
  overflow: scroll;
}

.modal-content table {
  table-layout: fixed;
  border-spacing: 1;
  border-collapse: collapse;
  text-align: center;
  height: 100%;
  width: 100%;
  border: solid 2px red;
  line-height: 1.35;
}

.modal-content tr,
.modal-content td {
  border: solid 0.5px black;
}
<div class="modal-content">
  <span class="close">&times;</span>
  <table id="nutrientData">
    <!--api nutrient data here-->
  </table>
</div>

Photo:

1 Ответ

4 голосов
/ 17 июня 2019

Похоже, что первая строка, которую вы пытаетесь центрировать, содержит только один <td> / <th> или текст только в первой <td> / <th>, а следующая остается пустой.

В любом случае вы можете сделать следующее:

  1. Убедитесь, что в первой строке есть только 1 <td> / <td>
  2. Используйте colspan, например: <td colspan=2>

Подробнее о colspan здесь

...