Center the contents and custom border

HTML & CSS
1

  1. Is there a way I can move the values towards the center of the box for all four values (two heading and two textValue). Here’s the JSfiddle I’m messing with. I tried justify-content:center; inside #parent CSS but that didn’t work.

  2. Also, is there a way I can customize the border?

1 Like
2

Don’t overthink it just because you’re trying to use flex. Flex deals with containers, not with content so justify-content will center the boxes themselves, not the content within the boxes.

For text-alignment, use text-align;

#parent > * { text-align: center;}

What do you mean customize the border? You’re already setting it to ridge, which sets a style to it, and there are other “out of the box” settings you can use. But you can do some wild stuff with gradients and such, so how much farther do you want to take the borders???

3

I want the border to be very thin of the same color and I tried looking at other options here: https://www.w3schools.com/css/css_border.asp but I don’t see any option satisfying my requirement.

Thanks!

4

Try this border shorthand property:

border: 1px solid black;

1 Like
5

Thanks. That seems to be working. I noticed that the middle one is getting more darker - maybe because two borders are meeting ?

image
image850×121 2.61 KB

7

Yes, you could use CSS margin to separate them. If you don’t want them separated, you would have to use for example border-bottom: none; (after shorthand property). Alernatively, without checking, I think you can have a <table> within a <table>.

I’ve spotted that you are using the same ID for more than one element. You should be using class instead and edit CSS selectors accordingly.

8

Hmm, that might make the job easy I think.

9

That was exactly what came to my mind. It looks like you are making a nested table, so do just that using table elements.

10

Perhaps not that easy. To avoid double width lines it looks like you will still have to mess about with border-top or bottom-bottom and border-left or border-right:

11

Thanks. In case of this approach, can the nested table width be adjusted such that it adjusts with the size of the outer table? Right now it’s showing like this - as you can see the outer table is quite big but the inner table is small :

image

12

I have updated the CodePen above to make the nested table 200px wide.

You can style widths of individual columns by use of <colgroup> and <col> elements. So perhaps use that for your main table and then set the width of the nexted table to 100% so it fills the width of the table cell it is within. Example:

1 Like
14

Thank you. Few questions -

  1. Did you mean you have specified 200px in your updated code pen? I couldn’t find it.

Is it possible to just mess with the nested table since in some case I’m not going to put this nested table inside the main table’s <td> element and hence I was thinking of just messing up with the nested table. In that case, I should be able to specify a class to the nested table’s <td> and test my desired output - right?

15

The 200px is in the CSS of the CodePen in post #10.

In my view the most important thing you need to test is whether the main table will display OK on a small smartphone which may be only 320 pixels wide. If you do not specify widths etc (such as the 200px above) and keep font size reasonably small, tables can automatically be amazingly responsive. There is discussion in this recent thread about what to do if your table content will not fit within the width of a small smartphone.

You could use rowspan and colspan instead of nesting a table, as demonstrated here:

16

I ended up doing following CSS changes :

Added a tableClass for the nested table like this:

.tableClass{
         width:100%;
  }

And used other classes for the td elements like this:

 .heading {
         width: 50%;
         text-align: center;
        
         }
         .resultname {
         width: 50%;
         text-align: center;
       
         }

So that seems to have fixed all issues with the text content I have mentioned so far. However, I have another place where I have different text inside the nested table which is showing like this:

image
image154×108 863 Bytes

So I added nowrap property in the heading and resultname cases like this since I wanted at least AB/AB on one line and similarly for CD/CD like this:

 .heading {
         width: 50%;
         text-align: center;
         white-space: nowrap;
         }
         .resultname {
         width: 50%;
         text-align: center;
         white-space: nowrap;
         }

This shifted the table a little bit in the middle like this:

image
image191×104 844 Bytes

I am wondering how should I adjust it such that it will look like the first image shown above but the text layout is like the above image ( second image)?

17

It is difficult to guess how you are getting those screenshots without seeing more of your CSS.

In the CodePen below, I have made the main table a flex item and used flex-grow: 1 to allow the width of the table to grow but have included max-width: 400px otherwise it would stretch across a large browser window and look silly.

Again I have set the width of the nested table to 100% so it fills the width of its parent cell (less default padding).

Note that I have not specified in any way the width of any table column: I am leaving it to the browser.

In this instance the table will easily shrink down to 320 pixels width if necessary because there is little content and few columns. A browser will adjust the width of columns automatically taking into account to the content within each column.

18

Thank you. I didn’t have to do any change. It looks like I was testing my changes in a XAMP server locally so it wasn’t displaying those tables correctly. Now, everything is working fine when I deployed the app and tested it.

19

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.