Weird bug in table

Question

I have a table with 2 rows and 6 colums.

I was playing in inspect element and came with the solution I needed ( see picture below )

as you see it looks good now.

Once I applied it into the css of the website It looks like below:

CSS

style1 //Categorie
{
    width:175px;
    display:inline-block;
}

.style2
{
width: 175px; //Klant
}

.style3
{
    width:175px; // Website
}

.style4
{
    width:175px; // Titel
}

The code I entered was for the 1st tbl row( the dropdown Categorie ) to display:inline-block

Anyone has a clue how to result could be different?

I need to get "Klant" to the left, near "Categorie"

Answer 1

Remove the display tag and add a float: left to all style blocks Also: You missed a point before style1

.style1 //Categorie
{
    width:175px;
    float: left;
}

.style2
{
width: 175px; //Klant
float: left;
}

.style3
{
    width:175px; // Website
    float: left;
}

.style4
{
    width:175px; // Titel
    float: left;
}

If that does not work, please post the html