Trouble with CSS positioning

Question

Trouble with CSS positioning

Styling with CSS:

.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}

Formatting in HTML:

<table>
    <tr>
        <th class= "one">Quantity</th>
        <th class= "two">Info</th>
        <th class= "three">Price</th>
    </tr>
    <tr>
        <td class = "one"><input type="text" name="quantity1" value=""/>
        <td class = "two">Cheap Monday Jeans 30/34 </td>
        <td class = "three">$39.99 </td>
    </tr>
    <tr>
        <td class = "one"><input type="text" name="quantity2" value=""/></td>
        <td class = "two">Herschel Bag (free) </td>
        <td class = "three">$129.99 </td>
    </tr>
    <tr>
        <td class = "one"><input type="text" name="quantity3" value=""/></td>
        <td class = "two">Diesel t-shirt (s) </td>
        <td class = "three">$59.99 </td>
    </tr>
    <tr>
        <td class = "one"><input type="text" name="quantity4" value=""/></td>
        <td class = "two">Superdry Patrol Lite Jacket (m) </td>
        <td class = "three">$129.99 </td>
    </tr>
    <tr>
        <td class = "one"><input type="text" name="quantity5" value=""/></td>
        <td class = "two">I love Canada t-shirt (s) </td>
        <td class = "three">$19.99 </td>
    </tr>
</table>

I am struggling to align the table rows containing clothes information and prices right below the headers. They keep skewing to the left instead of being centered as desired. I have tried using 'td { text-align: center; }' but it doesn't seem to work.

Your assistance in resolving this issue would be greatly appreciated. Thank you!

html css

Answer 1

Answer №1

Ensure the th header elements are aligned to the left. While you could center align the td elements, it may not look as aesthetically pleasing.

th.one {
     text-align:left;   
}
th.two {
     text-align:left;   
}
th.three {
     text-align:left;   
}
.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}

Answer 2

Ensure the th header elements are aligned to the left. While you could center align the td elements, it may not look as aesthetically pleasing.

th.one {
     text-align:left;   
}
th.two {
     text-align:left;   
}
th.three {
     text-align:left;   
}
.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}

Answer 3

Answer №2

Greetings! Take a look at this demonstration and hopefully it will be beneficial for you:

Check out the link here
These tweaks are all that is needed in your CSS section:

.one {
    width: 1%;
    text-align:center;
}

.two {
    width: 10%;
    text-align:center;
}

.three {
    width: 10%;
    text-align:center;
}

This is the outcome I achieved:

I hope this aligns with your preferences.

Answer 4

Greetings! Take a look at this demonstration and hopefully it will be beneficial for you:

Check out the link here
These tweaks are all that is needed in your CSS section:

.one {
    width: 1%;
    text-align:center;
}

.two {
    width: 10%;
    text-align:center;
}

.three {
    width: 10%;
    text-align:center;
}

This is the outcome I achieved:

I hope this aligns with your preferences.

Answer 5

Answer №3

If you want the <th> elements to align left, try this:

th {
    text-align:left;
}

In addition, you might want to use the <colgroup> tag along with nested <col> tags to style your table columns. Here's an example:

<table>
    <colgroup>
        <col class="one" />
        <col class="two" />
        <col class="three" />
    </colgroup>
    <tr>
        <th>Quantity</th>
        <th>Info</th>
        <th>Price</th>
    </tr>
    <tr>
        <td><input type="text" name="quantity1" value=""/></td>
        <td>Cheap Monday Jeans 30/34 </td>
        <td>$39.99 </td>
    </tr>
    ...rest of the code

This will eliminate the need to add the "class" attribute to each individual <td> element.

Answer 6

If you want the <th> elements to align left, try this:

th {
    text-align:left;
}

In addition, you might want to use the <colgroup> tag along with nested <col> tags to style your table columns. Here's an example:

<table>
    <colgroup>
        <col class="one" />
        <col class="two" />
        <col class="three" />
    </colgroup>
    <tr>
        <th>Quantity</th>
        <th>Info</th>
        <th>Price</th>
    </tr>
    <tr>
        <td><input type="text" name="quantity1" value=""/></td>
        <td>Cheap Monday Jeans 30/34 </td>
        <td>$39.99 </td>
    </tr>
    ...rest of the code

This will eliminate the need to add the "class" attribute to each individual <td> element.

Answer 7

Answer №4

Is this what you are looking for? TEST http://jsfiddle.net/yeyene/u7WzM/2/

Align to the right, and center.

th.one, td.one {
     text-align:center;   
}
th.two {
     text-align:center;   
}
td.two {
     text-align:right;  
    padding-right:5%;
}
th.three, td.three {
     text-align:center;   
}
.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}

Answer 8

Is this what you are looking for? TEST http://jsfiddle.net/yeyene/u7WzM/2/

Align to the right, and center.

th.one, td.one {
     text-align:center;   
}
th.two {
     text-align:center;   
}
td.two {
     text-align:right;  
    padding-right:5%;
}
th.three, td.three {
     text-align:center;   
}
.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}

Answer 9

Answer №5

Include the style text-align:center; in the CSS classes.

.first {
    width: 13%;
    text-align:center;
}

.second {
    width: 30%;
    text-align:center;
}

.third {
    width: 30%;
    text-align:center;
}

Alternatively, you can also add

td
{
   text-align:center;
}

Answer 10

Include the style text-align:center; in the CSS classes.

.first {
    width: 13%;
    text-align:center;
}

.second {
    width: 30%;
    text-align:center;
}

.third {
    width: 30%;
    text-align:center;
}

Alternatively, you can also add

td
{
   text-align:center;
}

Answer 11

Answer №6

The issue arises when you need an element to be left-aligned while another element is center-aligned above it. One solution would be to align the headings to the left and add padding to create space between the columns.

Here is the HTML code:

<table>
<tr>
    <th class= "one">Quantity</th>
    <th class= "two">Info</th>
    <th class= "three">Prices</th>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity1" value=""/></td>
    <td class = "two">Cheap Monday Jeans 30/34 </td>
    <td class = "three">$39.99 </td>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity2" value=""/></td>
    <td class = "two">Herschel Bag (free) </td>
    <td class = "three">$129.99 </td>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity3" value=""/></td>
    <td class = "two">Diesel t-shirt (s) </td>
    <td class = "three">$59.99 </td>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity4" value=""/></td>
    <td class = "two">Superdry Patrol Lite Jacket (m) </td>
    <td class = "three">$129.99 </td>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity5" value=""/></td>
    <td class = "two">I love Canada t-shirt (s) </td>
    <td class = "three">$19.99 </td>
</tr>
</table>

And here is the accompanying CSS:

.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}
th {
    text-align: left;
}
.two, .three {
    padding-left: 10%;
}

Take a look at this example on jsfiddle: http://jsfiddle.net/cpmmk/

Answer 12

The issue arises when you need an element to be left-aligned while another element is center-aligned above it. One solution would be to align the headings to the left and add padding to create space between the columns.

Here is the HTML code:

<table>
<tr>
    <th class= "one">Quantity</th>
    <th class= "two">Info</th>
    <th class= "three">Prices</th>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity1" value=""/></td>
    <td class = "two">Cheap Monday Jeans 30/34 </td>
    <td class = "three">$39.99 </td>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity2" value=""/></td>
    <td class = "two">Herschel Bag (free) </td>
    <td class = "three">$129.99 </td>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity3" value=""/></td>
    <td class = "two">Diesel t-shirt (s) </td>
    <td class = "three">$59.99 </td>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity4" value=""/></td>
    <td class = "two">Superdry Patrol Lite Jacket (m) </td>
    <td class = "three">$129.99 </td>
</tr>
<tr>
    <td class = "one"><input type="text" name="quantity5" value=""/></td>
    <td class = "two">I love Canada t-shirt (s) </td>
    <td class = "three">$19.99 </td>
</tr>
</table>

And here is the accompanying CSS:

.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}
th {
    text-align: left;
}
.two, .three {
    padding-left: 10%;
}

Take a look at this example on jsfiddle: http://jsfiddle.net/cpmmk/

Trouble with CSS positioning

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What is the best way to design a three-color column layout without any text?

The input data from the MySQL database requires two page refreshes in order to be retrieved

Why isn't a password appearing in the "generated-password" div from the password generator?

Creating a dynamic animation effect on a div with a changing number of child elements

Is your Z-Index failing to make an impact?

When inserting <img>, unwanted gaps appear between div elements

CSS Word Breaker: Shattering Text into Pieces

What is the best way to calculate the number of squares required to completely fill a browser window in real-time?

The display and concealment of a div will shift positions based on the sequence in which its associated buttons are clicked

Validation message causing Bootstrap form inline to lose center alignment

Problem with styling a CSS table

Can the behavior of "flex-end" be emulated in :before and :after pseudo-elements?

I've encountered an issue when attempting to use innerHTML for DOM manipulation

Steps to revert table data back to its original state after editing in Angular 12 template-driven form

Online platform showcasing erroneous information about Bootstrap Screen Readers

In Internet Explorer, transitions do not always play correctly when using ng-animate and ng-if

Embed a javascript tag to print a PDF document

Is there a way to easily toggle a Material Checkbox in Angular with just one click?

execute the function whenever the variable undergoes a change

Expanding Grid Container in Material UI to Fill Parent Height and Width