Kevin Powell - Community•6mo ago

displaying something in table problem

I was practicing php CRUD, I figured it out that it was the css fault when I try to configure it here is the html structure

<tr>
                <th>id</th>
                <th>username</th>
                <th>password</th>
                <th>edit</th>
                <th>delete</th>
 </tr>
<tr>
                <th>user_id</th>
                <td>username</td>
                <td>password</td>
                <td><a href="./user_remover.php">Edit</a></td>
                <td><a href="./user_remover.php"> ">X</a></td>
</tr>

<tr>
                <th>id</th>
                <th>username</th>
                <th>password</th>
                <th>edit</th>
                <th>delete</th>
 </tr>
<tr>
                <th>user_id</th>
                <td>username</td>
                <td>password</td>
                <td><a href="./user_remover.php">Edit</a></td>
                <td><a href="./user_remover.php"> ">X</a></td>
</tr>

even the browser dev tool shows me this html structure and here is my css

tr > td:nth-child(4),
tr > td:last-child{
    display: flex;
    justify-content: center;
    align-items: center;
}
tr > td:nth-child(4) > a{
    color: white;
    height: 20px;
    width: 50px;
    background-color: blue;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
}
tr > td:nth-child(4) > a:hover{
    background-color: rgb(4, 4, 86);
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

tr > td:nth-child(5) > a{
    color: white;
    height: 20px;
    width: 50px;
    background-color: rgb(105, 8, 8);
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
}
tr > td:nth-child(5) > a:hover{
    background-color: rgb(215, 10, 10);
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

tr > td:nth-child(4),
tr > td:last-child{
    display: flex;
    justify-content: center;
    align-items: center;
}
tr > td:nth-child(4) > a{
    color: white;
    height: 20px;
    width: 50px;
    background-color: blue;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
}
tr > td:nth-child(4) > a:hover{
    background-color: rgb(4, 4, 86);
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

tr > td:nth-child(5) > a{
    color: white;
    height: 20px;
    width: 50px;
    background-color: rgb(105, 8, 8);
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
}
tr > td:nth-child(5) > a:hover{
    background-color: rgb(215, 10, 10);
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}

other table css properties that I might have overlooked

table{
    border: 1px solid white;
    max-width: 700px;
    min-width: 500px;
    height: 100%;
    padding: 1rem;
    flex-grow: 1;
    margin-left: auto;
}
tr, th, td, tbody{
    border-collapse: collapse;
}
th{
    background-color: rgb(78, 78, 78);
}
td{
    background-color: rgba(128, 128, 128, 0.189);
}

table{
    border: 1px solid white;
    max-width: 700px;
    min-width: 500px;
    height: 100%;
    padding: 1rem;
    flex-grow: 1;
    margin-left: auto;
}
tr, th, td, tbody{
    border-collapse: collapse;
}
th{
    background-color: rgb(78, 78, 78);
}
td{
    background-color: rgba(128, 128, 128, 0.189);
}

25 Replies

Chris Bolson•6mo ago

You have an error in this line: <td><a href="./user_remover.php"> ">X</a></td> ah, but removing that doesn't resolve the issue.... I will take a closer look....

forlorn_diedOP•6mo ago

Oh that part, I just mistyped it because I was removing php codes there Its on the css Ive tried moving away the child targetjng properties and they work

Jochem•6mo ago

you're resetting the display property of a TD, that's not something you should do

tr > td:nth-child(4),
tr > td:last-child{
    display: flex;
    justify-content: center;
    align-items: center;
}

tr > td:nth-child(4),
tr > td:last-child{
    display: flex;
    justify-content: center;
    align-items: center;
}

that is overwriting the standard display value of table-cell, and breaking the table

forlorn_diedOP•6mo ago

So how do I approach it?

Chris Bolson•6mo ago

What are you trying to do in those cells? Why do you need flex?

Jochem•6mo ago

wrap the buttons, or use some other method to center them

forlorn_diedOP•6mo ago

Its to center the link haha

Jochem•6mo ago

text-align works just fine

forlorn_diedOP•6mo ago

No, its the button style that I want to maintain

Jochem•6mo ago

tr > td:nth-child(4),
tr > td:last-child{
  text-align: center;
}

tr > td:nth-child(4),
tr > td:last-child{
  text-align: center;
}

forlorn_diedOP•6mo ago

But I didn't think it would break the table

Jochem•6mo ago

then style the A tags, not the TD put some padding on there or something

forlorn_diedOP•6mo ago

Okay I'll try it now

Chris Bolson•6mo ago

adding display: inline-block;to your <a> selectors will them to take the height and width that you have defined. defining width and height on an inline element won't do anything.

forlorn_diedOP•6mo ago

Yeah It did maintain its size, but now I can't apply flex to it

Chris Bolson•6mo ago

why do you need flex? Are youn going to add more content to the buttons?

forlorn_diedOP•6mo ago

Aint no way It centered it

Jochem•6mo ago

you mean text-align? Yeah, it's an inline element even with display: inline-block;

forlorn_diedOP•6mo ago

Its how I approach when it comes to centering things, I guess I need to change it Yes, I guess I ignored the definition or something, I heard it before

Jochem•6mo ago

you need multiple tools in your toolbox. This just wasn't the right one for this situation

forlorn_diedOP•6mo ago

Thanks for the help, new core memory unlocked haha

Chris Bolson•6mo ago

You could also simplify your css code. There is a lot of repetition in there. For example if both of the links have the same styling except for the color, you can define them both with one selector. Then, in your "hover" selectors, you don't need to re-define things that haven't change. In this case the hover states really only need to define the background color. Here is a condensed version of that part of the CSS to hopefully demonstrate what I am saying:

tr > td:nth-last-child(-n + 2){ /* this selects the last 2 cells */
    text-align: center;
}
tr > td:nth-last-child(-n + 2) a{ /* define the common styles for the links in the last 2 cells */
    display: inline-block;
    height: 20px;
    width: 50px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    cursor: pointer;
}
/* edit link */
tr > td:nth-child(4) > a{
    background-color: blue;
}
tr > td:nth-child(4) > a:hover{
    background-color: rgb(4, 4, 86);
}
/* delete link */
tr > td:nth-child(5) > a{
    background-color: rgb(105, 8, 8);
}
tr > td:nth-child(5) > a:hover{
    background-color: rgb(215, 10, 10); 
}

tr > td:nth-last-child(-n + 2){ /* this selects the last 2 cells */
    text-align: center;
}
tr > td:nth-last-child(-n + 2) a{ /* define the common styles for the links in the last 2 cells */
    display: inline-block;
    height: 20px;
    width: 50px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    cursor: pointer;
}
/* edit link */
tr > td:nth-child(4) > a{
    background-color: blue;
}
tr > td:nth-child(4) > a:hover{
    background-color: rgb(4, 4, 86);
}
/* delete link */
tr > td:nth-child(5) > a{
    background-color: rgb(105, 8, 8);
}
tr > td:nth-child(5) > a:hover{
    background-color: rgb(215, 10, 10); 
}

forlorn_diedOP•6mo ago

Thanks, about something like this, I also had practiced it but still left me doing the "redefining" on a small amount because sometimes property disappear, but I do had it in mind, its just this project is a practice thats why I had gone overkill haha How do I tag this to solved? I dont know how

Jochem•6mo ago

you can edit tags and add "solved" on PC it's the three dots in the top right

forlorn_diedOP•6mo ago

Ah I got it now Thank you very much sirs, for the help

Gaming

Programming

displaying something in table problem