Блог

Главная - Вопросы по программированию - Как сделать так, чтобы моя таблица оставалась центрированной в HTML

Как сделать так, чтобы моя таблица оставалась центрированной в HTML

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать таблицу, а затем иметь возможность добавлять элементы в эту таблицу, сохраняя при этом центрирование таблицы. По какой-то причине после добавления дополнительных элементов в таблицу она не центрируется и находится немного правее. Как мне сделать так, чтобы таблица оставалась в центре? Вот изображения для справки.

Вот таблица перед добавлением дополнительных элементов

Вот таблица после добавления дополнительных элементов

Как вы можете видеть, она больше не центрируется с остальным текстом на странице. Вот мой HTML, CSS и Javascript. Я использую Ajax и API для получения изображения и погоды.

 function test(p1) {
a=$.ajax({
    url: p1,
    method: "GET"
}).done(function(data) {
        //clear out old data
    $("#day1").html("");
    $("#day2").html("");
    $("#day3").html("");
    $("#day4").html("");
    $("#day5").html("");
    $("#day6").html("");
    $("#day7").html("");
    $("#day1").html("<img src=http://openweathermap.org/img/wn/"   data.daily[1].weather[0].icon   "@2x.png>"   data.daily[1].weather[0].main);
    $("#day2").html("<img src=http://openweathermap.org/img/wn/"   data.daily[2].weather[0].icon   "@2x.png>"   data.daily[2].weather[0].main);
    $("#day3").html("<img src=http://openweathermap.org/img/wn/"   data.daily[3].weather[0].icon   "@2x.png>"   data.daily[3].weather[0].main);
    $("#day4").html("<img src=http://openweathermap.org/img/wn/"   data.daily[4].weather[0].icon   "@2x.png>"   data.daily[4].weather[0].main);
    $("#day5").html("<img src=http://openweathermap.org/img/wn/"   data.daily[5].weather[0].icon   "@2x.png>"   data.daily[5].weather[0].main);
    $("#day6").html("<img src=http://openweathermap.org/img/wn/"   data.daily[6].weather[0].icon   "@2x.png>"   data.daily[6].weather[0].main);
    $("#day7").html("<img src=http://openweathermap.org/img/wn/"   data.daily[7].weather[0].icon   "@2x.png>"   data.daily[7].weather[0].main);
})
} 
 .box1 {
  margin: 0 auto;
  width: 50%;
  padding: 10px;
}

table {
  text-align: center;
  margin: auto;
  width: 50%;
}

td {
  text-align: center;
} 
 <div class="col-sm-4 box1">
  <table class='table loadTable'>
    <tr>
      <td>Day 1</td>
      <td>Day 2</td>
      <td>Day 3</td>
      <td>Day 4</td>
      <td>Day 5</td>
      <td>Day 6</td>
      <td>Day 7</td>
    </tr>
    <tr>
      <td id='day1'>amp;nbsp;</td>
      <td id='day2'>amp;nbsp;</td>
      <td id='day3'>amp;nbsp;</td>
      <td id='day4'>amp;nbsp;</td>
      <td id='day5'>amp;nbsp;</td>
      <td id='day6'>amp;nbsp;</td>
      <td id='day7'>amp;nbsp;</td>
    </tr>
  </table>
</div>

Комментарии:

1. Можете ли вы обновить свой код, чтобы включить добавленные элементы?

2. @AibCodesDaily Я обновил свой код, чтобы включить добавленные элементы

Ответ №1:

Ajax в вашем примере не будет работать с Stackoverflow, поэтому я попытался воспроизвести некоторые элементы.

Если вы можете, просто используйте Flexbox для родительского div следующим образом:

 .box1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

Это гарантирует, что таблица будет полностью центрирована. Запустите фрагмент ниже:

 .box1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

table {
  width: 50%;
}

td {
  text-align: center;
}

img {
  width: 100%;
} 
 <div class="col-sm-4 box1">
  <table class='table loadTable'>
    <tr>
      <td>Day 1</td>
      <td>Day 2</td>
      <td>Day 3</td>
      <td>Day 4</td>
      <td>Day 5</td>
      <td>Day 6</td>
      <td>Day 7</td>
    </tr>
    <tr>
      <td id='day1'><img src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225__340.jpg"></td>
      <td id='day2'><img src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225__340.jpg"></td>
      <td id='day3'><img src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225__340.jpg"></td>
      <td id='day4'><img src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225__340.jpg"></td>
      <td id='day5'><img src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225__340.jpg"></td>
      <td id='day6'><img src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225__340.jpg"></td>
      <td id='day7'><img src="https://cdn.pixabay.com/photo/2019/11/18/08/21/bonsai-4634225__340.jpg"></td>
    </tr>
  </table>
</div>

Ответ №2:

Похоже, ваша таблица уже центрирована. Просто быстрый вопрос Weather for the next seven days : текст находится внутри table тега или перед таблицей? Я полагаю, что вы создали еще один элемент div ниже .box1 class.

Вы можете просто использовать:

 .box1 {text-align:center;margin:0 auto;display:block;}

Центрировать все элементы в box1 классе

Метки: ,