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

Question

如何让表格中的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">1</th>
              <th rowspan="2" class="SecondTd">2</th>
              <th rowspan="2">3</th>
              <th rowspan="2">4</th>
              <th rowspan="2">5</th>
              <th rowspan="2">6</th>
              <th rowspan="2">7</th>
              <th rowspan="2">8</th>
              <th rowspan="2" style="min-width:55px">9</th>
              <th rowspan="2" style="min-width:55px">10</th>
              <th rowspan="2">11</th>
              <th rowspan="2">12</th>
              <th rowspan="2">13</th>
              <th rowspan="2">14</th>
              <th rowspan="2">16</th>
              <th rowspan="2">17</th>
              <th rowspan="2">18</th>
              <th rowspan="2">19</th>
              <th colspan="2">20</th>
              <th rowspan="2">21</th>
              <th rowspan="2">22</th>
              <th rowspan="2" class="last_th">24</th>
            </tr>
            <tr>
              <th>12</th>
              <th>12</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in 100" :key="index">
              <td class="firstTd">fdsa</td>
              <td class="SecondTd">gfdg</td>
              <td>gfhfd</td>
              <td>fsdf</td>
              <td>fsaf</td>
              <td>re</td>
              <td>fsadf</td>
              <td>gsfd</td>
              <td>da</td>
              <td>hhsdh</td>
              <td>fsgda</td>
              <td>hdh</td>
              <td>hfdghfh</td>
              <td>tsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadg</td>
              <td>tsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadgtsadg</td>
              <td>hfghf</td>
              <td>afdgs</td>
              <td>sagsg</td>
              <td colspan="2">
                <div style="display:flex">
                  <div style="width:50%;border-right:1px solid #eee">111</div>
                  <div style="width:50%">111</div>
                </div>
              </td>
              <td>fsadfs</td>
              <td>fdfsf</td>
              <td class="last_td">fsdafas</td>
            </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>

Answer 1

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

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

overflowdot样式

          td.overflowdot{
            max-width:120px
          }