CODEWITHSUNDEEP
htmlcss
ryanw1771
ryanw1771

Reputation: 3

How to make my table stay centered in HTML

I am attempting to create a table and then be able to add elements to this table while still having the table centered. For whatever reason, after adding more elements to the table, it uncenters itself and is slightly to the right. How do I make it so that the table remains in the center? Here are images for reference.

Here is the table before adding more elements

Here is the table after adding more elements

As you can see, it is no longer centered with the rest of the text on the page. Here is my HTML, CSS, and Javascript. I am using Ajax and apis to retrieve the image and weather.

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'>&nbsp;</td>
      <td id='day2'>&nbsp;</td>
      <td id='day3'>&nbsp;</td>
      <td id='day4'>&nbsp;</td>
      <td id='day5'>&nbsp;</td>
      <td id='day6'>&nbsp;</td>
      <td id='day7'>&nbsp;</td>
    </tr>
  </table>
</div>

Upvotes: 0

Views: 88

Answers (2)

laurence keith albano
laurence keith albano

Reputation: 1482

Looks like your table is already centered. Just a quick question the Weather for the next seven days text is inside the table tag or before the table? I believe you've created another div element below .box1 class.

You can just simply use:

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

To center all elements under box1 class

Upvotes: 0

Aib Syed
Aib Syed

Reputation: 3196

The ajax in your example will not work on Stackoverflow so I've tried to replicate some of the elements.

If you are able, just use Flexbox on the parent div like so:

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

This will ensure the table is fully centered. Run the snippet below:

.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>

Upvotes: 1

Related Questions