css表格内容可以撑开固定高度

table {
    table-layout: fixed;
    word-wrap:break-word;
}
td {
    word-wrap:break-word;
}

 表格

<div class="list">
   <table>
     <tr class="trth">
         <th style="width:15%">文章名</th>
         <th style="width:85%">优美段落</th>
     </tr>
     <tr v-for="item in roleList" :key="item.id" class="trtd">
        <td style="text-align: center;">{{item[0]}}</td>
        <td style="">{{item[1]}}</td>
     </tr>   
   </table>
</div>

 定义数组

data:{
    roleList:[
        ['林徽因','记忆的梗上，谁不有两三朵娉婷，披着情绪的花'],
        ['余秋雨','再小的个子，也能给沙漠留下长长的身影;再小的人物，也能让历史吐出重重的叹息,记忆的梗上，谁不有两三朵娉婷，披着情绪的花'],
        ['林徽因','记忆的梗上，谁不有两三朵娉婷，披着情绪的花'],
        ['林徽因','记忆的梗上，谁不有两三朵娉婷，披着情绪的花'],
        ['余秋雨','再小的个子，也能给沙漠留下长长的身影;再小的人物，也能让历史吐出重重的叹息,记忆的梗上，谁不有两三朵娉婷，披着情绪的花'],
        ['余秋雨','再小的个子，也能给沙漠留下长长的身影;再小的人物，也能让历史吐出重重的叹息,记忆的梗上，谁不有两三朵娉婷，披着情绪的花'],
        ['林徽因','记忆的梗上，谁不有两三朵娉婷，披着情绪的花'],
    ]
}

 表格隔行变色和内容撑开固定高度

<style lang="less" scoped>
.list{
  position: relative;
  width: 100%;
  margin: 10px auto;
}
.list table{
  width:100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
  color: #444;
  table-layout: fixed;
  word-wrap:break-word;
}
.list .trth{
    height: 45px;
    background-color:#eef1f6;  
    color:#606266;          
    font-weight: bold;
    font-size: 15px;
}
.list .trtd{
  height: 56px;
  word-wrap:break-word;
  border-bottom: 1px solid #EBEEF5;
}
.list .trtd:nth-child(odd){
  background-color: #FAFAFA;
}
.list .trtd:hover{
  background-color: #f0f0f0;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
</style>