CODEWITHSUNDEEP
css
Shivam Sahil
Shivam Sahil

Reputation: 4925

Aligning a Table body based on the Header

I am trying to align elements of table along with its header. I have divided table head and body into two components (As I want to operate operations of Header, keeping body unaffected). Here is how it looks: enter image description here

Although the two entities are different, is there any way to align and reserve body space according to the headers. Like for example, advertiser column elements should be center aligned to its header. Here is the link to reproduce in codesandbox.

If it cannot be done by segregating the two is there any other way? Currently I am importing input from an array with first element [a,b,c,d] as header and rest all of them as body.

Here is my css class:

.HeadElems, .BodyElems
{
    border-left: 2 px solid black;
    padding: 0 1%;
    transition: 0.5s;
}


.HeadElems:hover
{
    cursor: pointer;
    transform: scale(1.1);
}
.Head
{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    border: 2px solid black;
    margin: 0.2% 10%;
    background-color: #41aea9;
    width: 80%;
}

.BodyRow
{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 0 10%;
    background-color: #e8ffff;
    width: 80%;  
}

@media screen and (max-width: 500px) {
    .Head, .BodyRow {
      margin: 0.2% 0;
    }
  }

Upvotes: 0

Views: 58

Answers (1)

Agustin Moles
Agustin Moles

Reputation: 1534

If you want a table to be displayed, I should suggest you to use the table HTML Element that totally suits your requisite.

And you can easily center the text by doing a little bit of CSS:

th, td {
  text-align: center;
}

Upvotes: 1

Related Questions