CODEWITHSUNDEEP
htmlcss
Samurai
Samurai

Reputation: 189

Can't align both sets of table data

I am creating a test transcipt page with 2 tables (so far) and there is this cell line on the bottom table to the left (as pointed out with arrows) that will only align, if the table data on the right is misaligned (as pointed out with the orange line)

Pic showing what i'm talking about

If I change the padding-left property on the table data on the bottom table (Example of table data "A", "E", etc.) to align with the table data above, the left line will misalign shown here:

Another example showing what i'm talking about

Is there a way where I can have both lines on the left align as shown in the very first image but also having the table data be aligned as shown in the last image?

Upvotes: 1

Views: 62

Answers (2)

Samurai
Samurai

Reputation: 189

I found a way to get the table data and the cell lines to align without looking at those eight "2"s. On the word "Geometry" I added 2 divs one before it and one after. I put four "2"s in each div and gave each div the same class name. In external CSS I set two properties:

.HiddenText
{
  display: inline;
  color: #ffffff;
}

That way the table header is center, the table data is center, the 2 lines are aligned and there aren't any ugly "2"s to look at. Image: https://i.sstatic.net/KftcA.jpg

Let me know if y'all need more code to understand this.

Upvotes: 1

Vikas Bansal
Vikas Bansal

Reputation: 2920

If you want to get the grades data at the center in that column then use <center> tag at every data of grades like: <td><center>A</center></td> it's the easiest way of doing this. If that's not the case then, there are many ways of doing this, so it's on you which way you are working. So, please do share your code.

Upvotes: 0

Related Questions