<p>幅がミチミチになってるとセルからはみ出てしまう</p>
<div class="">
    <table class="table-fix">
      <thead>
        <tr>
          <th class="w_150">テーブルタイトル</th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
          <th>6</th>
          <th>7</th>
          <th>8</th>
          <th>9</th>
          <th>10</th>
          <th>11</th>
          <th>12</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
        </tr>
        <tr>
          <td></td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
        </tr>
        <tr>
          <td></td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
        </tr>
      </tbody>
    </table>
</div>
<p>white-space: nowrap;をつける→<br>改行されない&幅指定が効かない</p>
<div class="">
    <table class="table-nowrap">
      <thead>
        <tr>
          <th class="w_150">テーブルタイトル</th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
          <th>6</th>
          <th>7</th>
          <th>8</th>
          <th>9</th>
          <th>10</th>
          <th>11</th>
          <th>12</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
        </tr>
        <tr>
          <td></td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
        </tr>
        <tr>
          <td></td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
        </tr>
      </tbody>
    </table>
</div>
<p>さらにdivで囲んでoverflow-x:autoをつける</p>
<div class="overflow-x">
    <table class="table-nowrap">
      <thead>
        <tr>
          <th class="w_150">テーブルタイトル</th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
          <th>6</th>
          <th>7</th>
          <th>8</th>
          <th>9</th>
          <th>10</th>
          <th>11</th>
          <th>12</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
        </tr>
        <tr>
          <td></td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
        </tr>
        <tr>
          <td></td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
        </tr>
      </tbody>
    </table>
</div>
<a href="https://mogumogu-design.com/table-th-td-width/" target="_blank">元サイト</a>
body{
  max-width:400px;
  color:#666;
}
*{
  box-sizing:border-box;
}
table{
  border:1px solid #ccc;
  border-collapse:collapse;
  margin:20px;
  width:100%;
  th,td{
    padding:10px;
    border:1px solid #ccc;
    
  }
  .w_150{
    width:180px !important;
  }
}

.table-fix{
  table-layout:fixed;
}
.table-nowrap{
  th,td{
    white-space: nowrap;
  }
}

.overflow-x{
  overflow-x:auto;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.