列表界面字段太多，样式怎样调整？

Question

我要展示一个列表页面，但是字段太多了，怎样让每列不像下图中变形，或者是有水平滚动条也可以接受。

Answer 1

Rosen 2017-09-05 14:16:08

table外层给个overflow-x:auto的容器，然后给table宽度加大

• 提问者 营赢盈英 #1

  这个样式是在哪里定义的？table-wrap col-lg-12
  <div className="table-wrap col-lg-12">
                          <table className="table table-striped table-bordered table-hover">
                              <thead>

• 提问者 营赢盈英 #2

  这样设置不起作用
  <div className="table-wrap col-lg-12" width="1000px" overflow-x="auto">
                          <table className="table table-striped table-bordered table-hover">

• Rosen 回复 提问者 营赢盈英 #3

  可以不用col-lg-12，直接样式上加宽度

点开查看后面2条评论

Answer 2

提问者 营赢盈英 2017-09-08 08:51:26

老师，我的列头要怎样设置才能保证不会被挤压变形（下图中的1处）。

如果单元格内容过多，怎样只显示一行，显示不了的省略号代替（下图2处）

• Rosen #1

  单行省略和多行省略，可以去查一下， 都是可以用css搞定的

• 提问者 营赢盈英 回复 Rosen #2

  OK，另外我想根据表格列头的文字宽度自动调整列宽，不会造成列头文字的换行。
  这个每列的宽度需要怎样设置？

• Rosen 回复 提问者 营赢盈英 #3

  最好手工控制宽度，自己调到合适

点开查看后面3条评论

Answer 3

提问者 营赢盈英 2017-09-06 15:00:49

某个字段的值太多时会导致把其它列的宽度压缩了，而我又不想设置一个很大的宽度，让它水平滚动。

我要怎样设置这个表格的样式呢？

Answer 4

提问者 营赢盈英 2017-09-05 15:30:54

1.

加上CSS样式后可以水平滚动了，但是格式乱了。

2.个别列表界面的字段较多，会出现错乱的情况，怎样保证在字段较多的列表页中 红框标识的部分可以在最右端显示？

• Rosen #1

  再外一层容器 overflow:hidden就可以了，让table的直接父元素做横向滚动

• 提问者 营赢盈英 回复 Rosen #2

  现在是整个浏览器窗口做了横向滚动，因为我是在return后的根页签加的水平滚动
  render() {
          return (
              <div id="page-wrapper" className="div-around-table">
  你说的再外一层容器是指？最接近table页签的外层容器吗？（如下）
  <div className="table-wrap col-lg-12">
                          <table className="table table-striped table-bordered table-hover">

• Rosen 回复 提问者 营赢盈英 #3

  table的外层给overflow-x:auto; 再外层给overflow:hidden

点开查看后面1条评论