How to Specify Different Widths for Columns in CSS3

Is there a way to specify different widths for columns in CSS3?

No, there isn't a way.

The feature is designed for content that flows between equal columns.

How to set different column in table to be different width in css?

Assuming your table has standard markup, you can use nth-child or nth-of-type to target specific cells in each row. You can substitute any number into nth-child, if your table has more columns.

/* nth-child(1) = the first td in each tr */td:nth-child(1) {  width: 100px;  background: #ddd;  }
/* the second */td:nth-child(2) {  width: 200px;  background: #ccc;}
/* the third */td:nth-child(3) {  width: 300px;  background: #bbb; }

<table>  <tbody>    <tr>      <td>1.1</td>      <td>1.2</td>      <td>1.3</td>      </tr>    <tr>      <td>2.1</td>      <td>2.2</td>      <td>2.3</td>     </tr>    </tbody>  </table>

Different width CSS columns

There is NO CORRECT way to set different column widths with CSS columns.

Why it won't work

column-width property only species the optimal width. The final output will be stretched or shrinked based on the available parent width. So it is not the right property to use when you need fixed or different column widths.
Ex:

div {
  width: 100px;
  column-width: 40px;
}

There is room for two 40px wide columns inside the 100px wide element. In order to fill the available space the actual column width will be increased to 50px.

div {
  width: 40px;
  column-width: 45px;
}

The available space is smaller than the specified column width and the actual column width will therefore be decreased.

Tweak

In case you have 2 columns, you can set a -ve margin-right to get different column widths. This works with more than 2 columns but is limited to just 2 widths.

Feasible Solution

You can use tables or display:table instead to achieve similar results.

responsive grid: different column widths

Desktop
Mobile <641

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
    body,
    html {
        padding: 0;
        margin: 0;
    }

    .bg-color {
        background-color: #ccc;
    }

    .bg-color1 {
        background: #817e7e;
    }

    /*  This is for three box Wrapper  */
    .my-row {
        display: flex;
        flex-flow: row wrap;
    }

    /* This is for three box  */
    .my-col {
        flex: 0 0 33.333%;
        width: 33.333%;
    }

    @media (max-width: 641px) {
        .my-col {
            flex: 0 0 100%;
            width: 100%;
        }
    }
    </style>
</head>

<body>
    <div class="my-row">
        <div class="my-col bg-color">
            <h1>Col 1</h1>
        </div>
        <div class="my-col bg-color1">
            <h1>Col 2</h1>
        </div>
        <div class="my-col bg-color">
            <h1>Col 3</h1>
        </div>
    </div>
</body>

</html>

How to have different column widths across rows in CSS Grid?

To make this work you need to find a common divider for all three lengths (42.5%, 48.75% and 52.5%). With a common divider you can create the right number of columns to accommodate each grid area.

In my example below, I created 400 columns of .25% width each (400 * .25 = 100%).

It then spanned grid areas across the correct number of columns:

45.00 / .25 = 180

48.75 / .25 = 195

52.50 / .25 = 210

It may not be exactly what you're looking for, but hopefully the concept helps you move forward.

No changes to the HTML.

.atul {  display: grid;  grid-template-columns: repeat(400, .25%);  grid-auto-rows: 50px; /* for demo only */  grid-row-gap: 30px;   /* note that you need to create column gaps through                           the proper distribution of columns, because if you                           use `grid-column-gap`, it will add a gap between                           all 400 columns */}
.card:nth-child(1) {  grid-column: 1 / 180;  grid-row: 1 / 3;}
.card:nth-child(2) {  grid-column: -1 / -210; /* starting at the end line of the grid                             (works only in explicit grids) */  grid-row: 1 / 2;}
.card:nth-child(3) {  grid-column: -1 / -210;  grid-row: 2 / 3;}
/* starting at the 4th item, target even items only */.card:nth-child(n + 4):nth-child(even) {  grid-column: 1 / 195;}
.card:nth-child(n + 4):nth-child(odd) {  grid-column: -1 / -195;}
.card:nth-child(4),.card:nth-child(5) {  grid-row: 3;}
.card:nth-child(6),.card:nth-child(7) {  grid-row: 4;}
.card:nth-child(8),.card:nth-child(9) {  grid-row: 5;}
.card:nth-child(10),.card:nth-child(11) {  grid-row: 6;}
.card:nth-child(12),.card:nth-child(13) {  grid-row: 7;}

<div class="atul">  <div class="card" style="background-color: red;">Card 1</div>  <div class="card" style="background-color: green;">Card 2</div>  <div class="card" style="background-color: yellow;">Card 3</div>  <div class="card" style="background-color: skyblue;">Card 4</div>  <div class="card" style="background-color: skyblue;">Card 5</div>  <div class="card" style="background-color: skyblue;">Card 6</div>  <div class="card" style="background-color: skyblue;">Card 7</div>  <div class="card" style="background-color: skyblue;">Card 8</div>  <div class="card" style="background-color: skyblue;">Card 9</div>  <div class="card" style="background-color: skyblue;">Card 10</div>  <div class="card" style="background-color: skyblue;">Card 11</div>  <div class="card" style="background-color: skyblue;">Card 12</div>  <div class="card" style="background-color: skyblue;">Card 13</div></div>

How to specify column widths in a HTML table so that one column is taking whatever it needs and the other one the rest of the available space?

Perhaps using white-space:nowrap; on your first column and then setting the second to 100% width?

td {
  border: 1px solid grey;
  padding: .5em;
}

table {
  width: 100%;
}

td:nth-of-type(1) {
  white-space: nowrap;
  background: lightgreen;
}

td:nth-of-type(2) {
  width: 100%;
  background: lightblue;
}

<table>
  <tr>
    <td>My Content</td>
    <td>My Other Content</td>
  </tr>
</table>

Set column width in table with CSS without using col or changing the HTML

Assuming that you want to define both columns as having a different width, you can style it using nth-child.

.articleTable tr td:first-child {
 width: 50px;
}

.articleTable tr td:nth-child(2) {
 width: 180px;
}

I hope this helps.

Here's a JSFiddle so you can see: http://jsfiddle.net/54z0ssgt/

Note: I've commented out the width: 100% applied to the table so you can see the columns sized by the defined pixels.

Edit:

To accommodate IE8, I've modified the CSS.

.articleTable tr td:first-child {
 width: 50px;
}

.articleTable tr td:first-child + td {
 width: 180px;
}

Working JSFiddle: http://jsfiddle.net/zmoLuh6v/