Adjust the width of the table's td elements

Question

Adjust the width of the table's td elements

I am looking to create a table similar to the one shown above.

Here is my implementation. Please review my JSFiddle.

HTML:

<table border="0" id="cssTable">
    <tr>
        <td>eredgb</td>
        <td><a href="self">04-Milwaukee</a></td>
        <td>705</td>
        <td>sdfdfdfed</td>
        <td>298</td>
    </tr>
    <tr>
        <td>sdfsdfsdfsdfsdf</td>
        <td><a href="self">04-Milwaukee</a></td>
        <td>705</td>
        <td>content2</td>
        <td>298</td>
    </tr>
    <tr>
        <td>sdfsdfsdfsdfsdf</td>
        <td><a href="self">04-Milwaukee edh walkohnykuohbnbd</a></td>
        <td>705</td>
        <td>content1</td>
        <td>298</td>
    </tr>
</table>

CSS:

#cssTable{
    margin-left:20px;
}

How can I achieve a layout like the screenshot provided? I want to ensure equal spacing and fixed width for each table cell content.

html css

Answer 1

Answer №1

Check out this example.

To target a particular column, you can utilize the css selector :nth-child().

#cssTable td {
    padding: 5px 15px;
}

#cssTable td:nth-child(2) {
    width: 100px;
}

Answer 2

Check out this example.

To target a particular column, you can utilize the css selector :nth-child().

#cssTable td {
    padding: 5px 15px;
}

#cssTable td:nth-child(2) {
    width: 100px;
}

Answer 3

Answer №2

To create different spacing for each td element, you can utilize the nth-child selector:

#cssTable{margin-left:20px;}  
#cssTable tr td:nth-child(1){width: 100px; padding-right: 10px;}
#cssTable tr td:nth-child(2){width: 300px; padding-right: 10px;}
#cssTable tr td:nth-child(3){width: 50px; padding-right: 10px;}
#cssTable tr td:nth-child(4){width: 100px; padding-right: 10px;}
#cssTable tr td:nth-child(5){width: 50px;}

http://jsfiddle.net/mLpH9/2/

In case your table expands, you have the option to adjust the padding-right for all columns and set it to 0 for the last-child.

Answer 4

To create different spacing for each td element, you can utilize the nth-child selector:

#cssTable{margin-left:20px;}  
#cssTable tr td:nth-child(1){width: 100px; padding-right: 10px;}
#cssTable tr td:nth-child(2){width: 300px; padding-right: 10px;}
#cssTable tr td:nth-child(3){width: 50px; padding-right: 10px;}
#cssTable tr td:nth-child(4){width: 100px; padding-right: 10px;}
#cssTable tr td:nth-child(5){width: 50px;}

http://jsfiddle.net/mLpH9/2/

In case your table expands, you have the option to adjust the padding-right for all columns and set it to 0 for the last-child.

Answer 5

Answer №3

Give this a shot

Apply some CSS styling to the table's td elements.

table td {
    width: 60px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

Alternatively, you can create a class and give it a name.

<td class="special_column">...</td>

Answer 6

Give this a shot

Apply some CSS styling to the table's td elements.

table td {
    width: 60px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

Alternatively, you can create a class and give it a name.

<td class="special_column">...</td>

Answer 7

Answer №4

If you want to streamline your HTML code, consider utilizing the <colgroup> and <col> elements. This will eliminate the need to assign individual classes to each <td>.

<table border="0" id="cssTable">
    <colgroup>
        <col width="100px" />
        <col width="100px" />
        <col width="50px" />
        <col width="75px" />
        <col width="50px" />
    </colgroup>
    <tr>
        ...

For more information, take a look at the updated Fiddle.

Answer 8

If you want to streamline your HTML code, consider utilizing the <colgroup> and <col> elements. This will eliminate the need to assign individual classes to each <td>.

<table border="0" id="cssTable">
    <colgroup>
        <col width="100px" />
        <col width="100px" />
        <col width="50px" />
        <col width="75px" />
        <col width="50px" />
    </colgroup>
    <tr>
        ...

For more information, take a look at the updated Fiddle.

Answer 9

Answer №5

To apply padding in your css, simply insert the following code:

#cssTable td
{
 padding:0 20px;
}

This will add padding to both the left and right sides. Here is a live example on jsfiddle.

Answer 10

To apply padding in your css, simply insert the following code:

#cssTable td
{
 padding:0 20px;
}

This will add padding to both the left and right sides. Here is a live example on jsfiddle.

Answer 11

Answer №6

How about this approach? (modified based on @Grey 's initial code)

#customTable td {
    padding: 0px 10px;
}

#customTable a {
    color:blue;
}

#customTable td:nth-child(1) {
    width:25px;
}
#customTable td:nth-child(2) {
    width:180px;
}
#customTable td:nth-child(3),#customTable td:nth-child(5) {
    width:35px;
    font-weight:bold;
}
#customTable td:nth-child(4) {
    width:25px;
}

In order to ensure consistency, specify a fixed width for each td in a row. For the rest, replicate the widths of the specified columns. You may assign a unique Class to each cell based on its column position. You could also utilize percentage-based widths to enhance your display on larger screens with higher resolutions.

Answer 12

How about this approach? (modified based on @Grey 's initial code)

#customTable td {
    padding: 0px 10px;
}

#customTable a {
    color:blue;
}

#customTable td:nth-child(1) {
    width:25px;
}
#customTable td:nth-child(2) {
    width:180px;
}
#customTable td:nth-child(3),#customTable td:nth-child(5) {
    width:35px;
    font-weight:bold;
}
#customTable td:nth-child(4) {
    width:25px;
}

In order to ensure consistency, specify a fixed width for each td in a row. For the rest, replicate the widths of the specified columns. You may assign a unique Class to each cell based on its column position. You could also utilize percentage-based widths to enhance your display on larger screens with higher resolutions.

Answer 13

Answer №7

One issue at hand is that the table does not enforce the specified width for td elements until you apply

table { table-layout: fixed; }

and create a first row of the table with

td { height: 0; }

and define the width for each td in this row.

Alternatively, you can also use <col>, but it may not be effective in certain browsers as td works universally.

This type of query has been raised numerous times across various platforms, like here.

Answer 14

One issue at hand is that the table does not enforce the specified width for td elements until you apply

table { table-layout: fixed; }

and create a first row of the table with

td { height: 0; }

and define the width for each td in this row.

Alternatively, you can also use <col>, but it may not be effective in certain browsers as td works universally.

This type of query has been raised numerous times across various platforms, like here.

Adjust the width of the table's td elements

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

MUI Grid - justify content to the right

Adjust the size of three panels (left, middle, right) using Javascript, ensuring that the middle panel remains unchanged in size

How can I retrieve the URL of images listed in my CSS file using Python?

unable to retrieve real-time data using a search bar

Steps to indicate a selected check column in a grid

Comparison of HTML's equivalent to LaTeX's label and ef functionality

Layering digital sheets of paper and rearranging them with the help of CSS

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?

Creating an easy-to-update catalog utilizing an external file: A step-by-step guide

retrieve data with the help of DOMDocument

Buttons are not aligned with the rest of the row's height

Conceal all components on a webpage with the exception of a designated div

Unusual Login Problem Involving Ajax, jQuery, and PHP

What is the best way to retrieve user groups in Django?

How to add vertical bars within ng-repeat in AngularJS

Jquery function for determining height across multiple browsers

Unable to "clean up" the HTML document

Applying CSS transition delays to multiple images

I'm encountering an issue where the data in my personalDeatail model's add value is not updating automatically. Can someone please help me

PHP script not refreshing properly on reload causing randomized content to display inaccurately