Cheese Cheese - 3 months ago 10
CSS Question

Centering Table TR's

I'm creating a website that displays some content in a table and I want it to always be centered. Its centered if there is 3 TD's it is centered, but I want it too center a TR in the middle of the 3 TD's when it only has 2 TD's.

Current

I want the Test5 and Test6 to center in the middle of the other TR but I can't seem to figure out how.

My Current code:



<html>

<style>
#Center {
text-align: center;
}
#CenterTable {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>

<div id="Center">

<p>Testing Centered Table</p>

<table id="CenterTable">

<tr>

<td>
Test1
</td>

<td>
Test2
</td>

<td>
Test3
</td>

</tr>

<tr>

<td>
Test4
</td>

<td>
Test5
</td>

</tr>

</table>

</div>

</html>




Answer

Tables are not used hardly at all anymore. You can accomplish this using div boxes and the flexbox design.

Heres a code snippet of what i think you're trying to accomplish but i made it with divs and the flexbox design.

.box-wrap {
  background: #a00;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.test {
  background: #0a0;
  width: 33.33%;
  height: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="box-wrap">
  <div class="test">
    test1
  </div>
  <div class="test">
    test2
  </div>
  <div class="test">
    test3
  </div>
  <div class="test">
    test4
  </div>
  <div class="test">
    test5
  </div>
</div>

Comments