Why Td Width Is Not Working or Not Followed

td widths, not working?

It should be:

<td width="200">

<td style="width: 200px">

Note that if your cell contains some content that doesn't fit into the 200px (like somelongwordwithoutanyspaces), the cell will stretch nevertheless, unless your CSS contains table-layout: fixed for the table.

EDIT

As kristina childs noted on her answer, you should avoid both the width attribute and using inline CSS (with the style attribute). It's a good practice to separate style and structure as much as possible.

Why TD width is not working or not followed?

I highly believe the answer to this question is such:

The priority of widths that will affect the TD is

Table Width
Parent Element Width (and if none, Viewport)
Element(TD) Width.

Hence if the table width is set, the TD's will ALWAYS adjust to the width of the table. However, if the width is unset, the "main" width will be the true width of the viewport. Unless the CSS code states otherwise, this holds true. And only when the total width of the TD's is smaller than that of the viewport, the elemental width will be taken into account.

Edit

Table width will always override TD width.
Stated TD width will only be followed until it exceeds viewport width, and viewport width will be taken as priority.

Table TD width not working

add the width to the anchor inside the td and it works.

td > a {
  width: 200px;
}

Demo: https://jsfiddle.net/1vkfg9nb/

How to fix the problem with table td width

Add table-layout: fixed to table. By default table-layout is auto which makes the table behave as follows:

Each cell (<td> and <th>) width will conform to its content so the widest cell will have the most content.
Any width not set by content is distributed automatically (this will usually make the columns appear at various widths in an asymmetrically unappealing pattern)

A table that has table-layout: fixed allows more control of widths:

A width set explicitly to a cell (preferably to a <th>) will be honored.
Always assign widths to each column so that they will add up to 100% 0f the tables width else the extra width will be distributed automatically (defeating the purpose of using table-layout: fixed).

In general concerning width:

The total width of cells of a row (<tr>) should always be 100% unless there are colspan and/or rowspan in which case the row in which it has the most number of cells will govern overall width distribution.

table {  table-layout: fixed;  border-collapse: collapse;}
caption {  caption-side: bottom;}
td {  outline: 1px solid #000}
.left {  text-align: left;}
var {  display: block;  text-align: center;  font-weight: 900;  color: tomato}

<table>  <caption><var>100%</var></caption>  <thead>    <tr>      <th width='12%'></th>      <th width='22%'></th>      <th width='6%'></th>      <th width='12%'></th>      <th width='22%'></th>      <th width='12%'></th>      <th width='14%'></th>    </tr>  </thead>  <tbody>    <tr>      <td rowspan="6">        <p>전형유형</p>        <var>12%</var>      </td>      <td rowspan="2" colspan="2">        <p class="left"><input type="checkbox">일반전형</p>      </td>      <td rowspan="6">        <p>지원자<br/>특기<br/>사항</p>        <var>12%</var>      </td>      <td rowspan="3">        <p class="left"><input type="checkbox">국가유공자 자녀</p>        <var>22%</var>      </td>      <td rowspan="6">        <p>지역</p>        <var>12%</var>      </td>      <td rowspan="3">        <p class="left"><input type="checkbox">대전</p>        <var>14%</var>      </td>    </tr>
    <tr>    </tr>
    <tr>      <td rowspan="2">        <p class="left"><input type="checkbox">마이스터인재전형</p>        <var>22%</var>      </td>      <td rowspan="4">        <p>특별<br/>전형</p>        <var>6%</var>      </td>    </tr>
    <tr>      <td rowspan="3">        <p class="left"><input type="checkbox">특례입학 대상자</p>      </td>      <td rowspan="3">        <p class="left"><input type="checkbox">전국</p>      </td>    </tr>
    <tr>      <td rowspan="2">        <p class="left"><input type="checkbox">사회통합 전형</p>      </td>    </tr>
    <tr>    </tr>  </tbody></table>

Why width property doesn't work on my table?

This is due to the behavior table where you cannot decrease its width less than the needed width for its content.

To be able to change this you need to set table-layout to fixed as by default it's auto and as you can read here:

Automatic table layout algorithm (this is default):

The column width
is set by the widest unbreakable content in the cells Can be slow,
since it needs to read through all the content in the table, before
determining the final layout

and

Fixed table layout algorithm:

The horizontal layout only depends on
the table's width and the width of the columns, not the contents of
the cells Allows a browser to lay out the table faster than the
automatic table layout The browser can begin to display the table once
the first row has been received

main {  position: relative;  width: 80%;  float: right;  height: auto;}
div.container {  width: 95%;  height: auto;  margin: 0 auto;}
main div.container>table {  width: 10px;  overflow: hidden;  background-color: red;}

<main>  <div class="container">    <table>      <thead>        <tr>          <th>Keterangan event</th>          <th>Waktu event</th>          <th>Lokasi event</th>          <th>Lokasi event</th>          <th>Cover</th>        </tr>      </thead>      <tbody>        <tr>          <td>something</td>          <td>something</td>          <td>something</td>          <td>something</td>          <td>something</td>        </tr>      </tbody>    </table>    after adding table-layout:fixed;    <table style="table-layout:fixed;">      <thead>        <tr>          <th>Keterangan event</th>          <th>Waktu event</th>          <th>Lokasi event</th>          <th>Lokasi event</th>          <th>Cover</th>        </tr>      </thead>      <tbody>        <tr>          <td>something</td>          <td>something</td>          <td>something</td>          <td>something</td>          <td>something</td>        </tr>      </tbody>    </table>
     </div></main>

Why is my HTML table not respecting my CSS column width?

You may get more luck with setting widths for your table cells if you apply the rule table-layout: fixed to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.