抄了一个微信小程序的表格。新加表格列文字过长可左右滚动。主要就white-space:nowrap；和td下的overflow-y:auto

仅是列左右滚动，要整个表的，配合scroll-view用呗

不换行，不省略，不截断，固定宽度内左右滚动。

效果是：

let a  = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

【 {{ a }} 】       

【】文字不会超过a，也不会挤大【】，可以在【】中左右滚动

1、代码表格

<view class="table">
    <view class="tr bg-w">
        <view class="th" wx:for="{{ grfListColumns }}" wx:key="field">{{item.title}}</view>
    </view>
    <block wx:for="{{grfList}}" wx:key="{{id}}" wx:for-item="grf" >
        <view class="tr">
            <view class="td" wx:for="{{ grfListColumns }}" wx:key="field">
                <view style="overflow-y: auto">
                    {{grf[item.field]}}
                </view>
            </view>
        </view>
    </block>
</view>

2、css样式，主要就white-space:nowrap;和td下的overflow-y:auto

  .table {
    border: 0px solid darkgray;
  }
  .tr {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 3rem;
    align-items: center;
  }
  .td {
      width:40%;
      justify-content: center;
      text-align: center;
      /* display: -webkit-box; */
      /* word-break:break-all; */
      /* text-overflow: ellipsis; */
      overflow: hidden;
      /* -webkit-box-orient:vertical; */
      /* -webkit-line-clamp:2;  */
      white-space: nowrap;
      /*  设置 需要显示的行数 */
  }
  .bg-w{
    background: snow;
  }
  .th {
    width: 40%;
    justify-content: center;
    background: #3366FF;
    color: #fff;
    display: flex;
    height: 3rem;
    align-items: center;
  }

css的样式，我只把东西效果改出来了，有些样式应该还是有问题，可以自己看看，我后期也再编辑编辑

贴几个搜索匹配，不知道有没有用：微信小程序      文字过多溢出       滚动文字    滑动文字