HTML模态框尺寸无法适配表格问题求助

我写了如下模态框（Modal）样式及相关参数，但弹出窗口无法完整容纳表格内容。尝试将.modal-dialog的width属性从auto修改为2500px等固定值后仍未解决，请问需要调整哪些设置？

HTML代码部分：

<style>
    .modal:before {
      content: "";
      display: none;
      background: rgba(0, 0, 0, 0.6);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
    }
    .modal:target:before {
      display: block;
      vertical-align: middle;
    }
    
    .modal:target .modal-dialog {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
      top: 30%;
      vertical-align: middle;
    }
    
    .modal-dialog {
      background: #fefefe;
      border: #333333 solid 1px;
      border-radius: 5px;
      margin:auto;
      position: fixed;
      vertical-align: middle;
      left: 50%;
      top: -100%;
      z-index: 11;
      width: auto;
      -webkit-transform: translate(0, -500%);
      -ms-transform: translate(0, -500%);
      transform: translate(0, -500%);
      -webkit-transition: -webkit-transform 0.3s ease-out;
      -moz-transition: -moz-transform 0.3s ease-out;
      -o-transition: -o-transform 0.3s ease-out;
      transition: transform 0.3s ease-out;
    }
    
    .modal-body {
      padding: 20px;
      
    }
    
    .modal-header,
    .modal-footer {
      padding: 10px 20px;
    }

   .tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0r18{border-color:inherit;font-size:14px;text-align:center;vertical-align:top}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-62xo{font-size:14px;font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-umgj{border-color:inherit;font-size:14px;font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-6nwz{font-size:14px;text-align:center;vertical-align:top} 
    </style>

你需要调整以下几个关键设置来让模态框完整容纳表格内容：

1. 修复模态框宽度与滚动逻辑 #

直接设置固定宽度可能超出视口范围，改用视口百分比限制最大宽度，并添加水平滚动：

.modal-dialog {
  /* 保留原有属性，新增/修改以下内容 */
  max-width: 95vw; /* 限制最大宽度为视口的95%，避免超出屏幕 */
  overflow-x: auto; /* 内容超出时显示水平滚动条 */
  left: 0; /* 移除原left:50%，避免位移冲突 */
  right: 0;
  transform: translate(0, -500%); /* 仅保留垂直方向位移 */
}

2. 给模态内容区添加垂直滚动 #

如果表格高度也超出模态框，给.modal-body设置最大高度和垂直滚动：

.modal-body {
  padding: 20px;
  max-height: 70vh; /* 限制内容区最大高度为视口的70% */
  overflow-y: auto; /* 垂直内容超出时显示滚动条 */
}

3. 调整表格单元格换行规则 #

表格单元格默认换行逻辑可能导致长内容撑爆宽度，修改为强制换行：

.tg td, .tg th {
  word-break: break-all; /* 强制内容换行，避免单元格过宽 */
}

4. 修正模态框居中逻辑 #

原居中方式会导致水平偏移，改用上下间距+左右自动margin实现居中：

.modal:target .modal-dialog {
  transform: translate(0, 0); /* 仅恢复垂直方向位移 */
  top: 30%;
  margin: 0 auto; /* 水平居中 */
}

内容的提问来源于stack exchange，提问作者CodeMaster