html+css表格超过一定宽度显示省略号

如何让表格中的14列和15列超过120px宽度，就隐藏并显示省略号

<template>
  <div id="printTable">
    <div class="craftTable processScheduling">
      <div class="table_container">
        <table border="1px" cellspacing="0" class="text-center">
          <thead>
            <tr>
              <th rowspan="2">1th>
              <th rowspan="2" class="SecondTd">2th>
              <th rowspan="2">3th>
              <th rowspan="2">4th>
              <th rowspan="2">5th>
              <th rowspan="2">6th>
              <th rowspan="2">7th>
              <th rowspan="2">8th>
              <th rowspan="2" style="min-width:55px">9th>
              <th rowspan="2" style="min-width:55px">10th>
              <th rowspan="2">11th>
              <th rowspan="2">12th>
              <th rowspan="2">13th>
              <th rowspan="2">14th>
              <th rowspan="2">16th>
              <th rowspan="2">17th>
              <th rowspan="2">18th>
              <th rowspan="2">19th>
              <th colspan="2">20th>
              <th rowspan="2">21th>
              <th rowspan="2">22th>
              <th rowspan="2" class="last_th">24th>
            tr>
            <tr>
              <th>12th>
              <th>12th>
            tr>
          thead>
          <tbody>
            <tr v-for="(item,index) in 100" :key="index">
              <td class="firstTd">fdsatd>
              <td class="SecondTd">gfdgtd>
              <td>gfhfdtd>
              <td>fsdftd>
              <td>fsaftd>
              <td>retd>
              <td>fsadftd>
              <td>gsfdtd>
              <td>datd>
              <td>hhsdhtd>
              <td>fsgdatd>
              <td>hdhtd>
              <td>hfdghfhtd>
              <td>tsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtd>
              <td>tsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtd>
              <td>hfghftd>
              <td>afdgstd>
              <td>sagsgtd>
              <td colspan="2">
                <div style="display:flex">
                  <div style="width:50%;border-right:1px solid #eee">111div>
                  <div style="width:50%">111div>
                div>
              td>
              <td>fsadfstd>
              <td>fdfsftd>
              <td class="last_td">fsdafastd>
            tr>
          tbody>
        table>
      div>
    div>

  div>
template>

<script>
import { ref } from "vue";
import print from 'print-js';

export default {
  setup() {
   
    return {
    };
  },
};
script>

<style lang="scss" scoped>
.craftTable {
  width: 100%;
  margin: auto;
  background-color: #fff;

  .table_container {
    width: 100%;
    height: calc(100vh - 110px);
    overflow: scroll;
    margin: auto;

    table {
      // table-layout: fixed;
      border: none;
      border-collapse: collapse;
      background-color: #fff;
      text-align: center;

      thead {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 3;

        tr {
          color: #000;
          font-weight: bold;

          th {
            background-color: skyblue;
            min-width: 70px;
            border-right: 1px solid #eee;
          }

          //操作
          th.last_th {
            position: -webkit-sticky;
            position: sticky;
            right: 0;
            z-index: 4;
            border-right: none;
            min-width: 150px;
          }
        }
      }

      tbody {
        tr {
          cursor: pointer;

          td {
            min-width: 70px;
            position: -webkit-sticky;
            position: sticky;
            // word-break: break-word;
            // word-wrap: break-word;
            // white-space: nowrap;
            padding: 0px;
            border: 1px solid #eee;
            height: 30px;
          }

          td.last_td {
            background-color: rgb(142, 142, 230);
            font-weight: bold;
            right: 0;
            // z-index: 3;
            border-right: none;
          }
        }
      }

      //订单号，客户代码
      th:nth-child(14),
      td:nth-child(14),
      th:nth-child(15),
      td:nth-child(15) {
        // width: 8%;
        min-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      th:nth-child(16),
      th:nth-child(19),
      th:nth-child(20),
      th:nth-child(21) {
        min-width: 200px;
      }
    }
  }

}

style>

14,15列添加一样特殊样式，设置max-width:120px就行

              <td class="overflowdot">tsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadg</td>
              <td class="overflowdot">tsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadg</td>             

overflowdot样式

          td.overflowdot{
            max-width:120px
          }

td{

        width:100%;

        word-break:keep-all;/* 或是 white-space:nowrap;不换行 */

        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */

        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/

    }

 .text {
            width: 280px;
            text-overflow: ellipsis;
            overflow: hidden;
            color: red;
        }

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632