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

Blazor Shared CSS File

Risk Score Generating Form

Implementing the Google Maps API into a React application to generate a customized route between two specified points

Color picker can be utilized as an HTML input element by following these steps

Removing a jQuery class while simultaneously adding it to different elements

Modify the Color of Chosen Anchors for Site Categories WITHOUT Using JavaScript

In the IE7 standards mode, table cells with no content will have a height of 1px

Retrieving information from a dynamically generated HTML table using PHP

The webpage hosted on Heroku displays a blank background, requiring users to refresh the page with an F5 key

Proper techniques for enlarging a background image using CSS

Tips for showcasing a table generated from various input types on a separate page after pressing the submit button

Apply a specific style conditionally using Angular's ng-repeat directive

Ways to Get Rid of Line Beneath the Table

I require the use of XSL to verify the href value of links and modify it if needed, without altering any other attributes

Ways to enlarge the font size of a hyperlink

Why is it that styling <div> and <img> with a URL doesn't seem to work, even when applying the same styles?

Does the media query max-width refer to the size of the viewport or the size of the window?

Vanilla JavaScript Troubleshooting: Top Scroll Button Issue

Trouble with CSS animation when incorporating JavaScript variables from a PHP array

What is the best way to create a sticky/fixed navbar that conceals the div above it while scrolling on the page?