原生table内td文字太多导致整个table变形最快解决方案

给table内的td添加width宽度即可,宽度会根据具体等比固定,如果再多出会固定宽度,高度自适应:

 <table border="1">
            <tr>
              <th>处理步骤</th>
              <th>处理部门</th>
              <th>处理人员</th>
              <th>处理内容</th>
              <th>处理时间</th>
            </tr>
            <tr v-for="(item, index) in dealinfo" v-bind:key="index">
              <td>{{ item.dealStateName }}</td>
              <td>{{ item.handleRoleId }}</td>
              <td>{{ item.handleUserId }}</td>
              <td>{{ item.dealContent }}</td>
              <td>{{ item.handleTime }}</td>
            </tr>
          </table>

改:

 <table border="1">
            <tr>
              <th width=100>处理步骤</th>
              <th width=100>处理部门</th>
              <th width=100>处理人员</th>
              <th width=400>处理内容</th>
              <th width=150>处理时间</th>
            </tr>
            <tr v-for="(item, index) in dealinfo" v-bind:key="index">
              <td>{{ item.dealStateName }}</td>
              <td>{{ item.handleRoleId }}</td>
              <td>{{ item.handleUserId }}</td>
              <td>{{ item.dealContent }}</td>
              <td>{{ item.handleTime }}</td>
            </tr>
          </table>

原生table内td文字太多导致整个table变形最快解决方案

改后:

原生table内td文字太多导致整个table变形最快解决方案

上一篇:前端javascript 实现到出excel 支持分页


下一篇:ADRC学习|TD微分跟踪器(原理解析和Matlab实现)