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

Can the conventional HTML context menu be swapped out for a link context menu instead?

The styling of Div remains unchanged by CSS

unable to decrease the dimensions of the image within the next/image component

Issue with zeroLineColor and zeroLineWidth not functioning properly for the x-axis within Chartjs

Encountered an error while attempting to load resource in Node.js

Issues are arising with CSS .not(selector) functionality when applied to a span element

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

Delegating events with .on('click') and using the CSS negation selector :not()

What is the best method to align a form in three columns from each side without relying on Bootstrap?

Adjust picture to fit in div and align vertically

Display a div using jQuery when it reaches halfway the height of another div

The color of the letters from the user textbox input changes every second

Tips for properly styling the input type range element

Save user input data into an Excel file using PHPExcel

What is the method for invoking a function with arguments within an HTML `<p>` element?

JavaScript Issue Causing Jquery Carousel Dysfunction

Trouble with Divs and Element Placement

Issue with ng-multiselect-dropdown where clearing selected items programmatically does not visually work as expected

Is it possible to leverage the flex features of react-native in a manner similar to the row/column system of

The alignment in Firefox and Google Chrome does not appear to be consistent