How to set different width for each individual column in a HTML table?

Question

I have a horizontal scrollable HTML table. I want to set different width for each individual column. I tried inline style for width. I tried <th>'s old width attribute. But nothing is working for me. I don't know where I am doing wrong. Please note that I don't want to change my HTML structure and the CSS for this layout specific to the scrolling.

Here's my code:

#tb_wrapper {
  border: 1px solid #cccccc;
  max-width: 960px;
  margin: 50px auto;
  padding: 10px;
}

.tb_responsive {
  overflow-x: auto;
  overflow-y: hidden;
}

.tb_records {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}

.tb_records th {
  background-color: #5F5F5F;
  color: #FFFFFF;
  font-weight: bold;
}

.tb_records th,
.tb_records td {
  padding: 10px;
  border: 1px solid #000000;
  font-size: 15px;
  white-space: nowrap;
}

.tb_records tr:nth-child(even) {
  background-color: #F2F2F2;
}

.tb_records tr:hover {
  background-color: #F5F5F5;
}

<div id="tb_wrapper">
  <div class="tb_responsive">
    <table class="tb_records">
      <tr>
        <th>Post ID</th>
        <th>Post Name</th>
        <th>Post URL</th>
        <th style="width:200px;">Post Title</th>
        <th width="300">Post Heading</th>
        <th>Post Content</th>
        <th>Post Date Published</th>
        <th>Post Date Modified</th>
        <th>Post Image</th>
        <th>Post Views</th>
      </tr>
      <tr>
        <td>1</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>2</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>3</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>4</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>5</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>6</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>7</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>8</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>9</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
      <tr>
        <td>10</td>
        <td>My Post</td>
        <td>my-post</td>
        <td>My Post</td>
        <td>My Post</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>2017-07-21 13:58:16</td>
        <td>2019-07-30 22:38:36</td>
        <td>my-post.jpg</td>
        <td>7</td>
      </tr>
    </table>
  </div>
</div>

Answer 1

You just need to add a couple properties to the table. Both "width" and "style" works the same.

table{
    table-layout: fixed;
    width: 100%;
    }

<div id="tb_wrapper">
    	<div class="tb_responsive">
            <table class="tb_records">
                <tr>
                    <th>Post ID</th>
                    <th>Post Name</th>
                    <th>Post URL</th>
                    <th style="width:200px;">Post Title</th>
                    <th width="300">Post Heading</th>
                    <th>Post Content</th>
                    <th>Post Date Published</th>
                    <th>Post Date Modified</th>
                    <th>Post Image</th>
                    <th>Post Views</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>My Post</td>
                    <td>my-post</td>
                    <td style="width:200px;">My Post</td>
                    <td width="300">My Post</td>
                    <td>Lorem ipsum dolor sit amet.</td>
                    <td>2017-07-21 13:58:16</td>
                    <td>2019-07-30 22:38:36</td>
                    <td>my-post.jpg</td>
                    <td>7</td>
                </tr>
                
            </table>
        </div>
    </div>