正文

React-Table 列固定宽度破坏了整个表格

 2023-02-19  202

关键词：

【中文标题】React-Table 列固定宽度破坏了整个表格【英文标题】：React-Table column fixed width spoils whole table 【发布时间】：2018-03-08 22:22:24 【问题描述】：

有人可以向我解释一下为什么我不能在 First Name 列上设置固定宽度吗？它设置了传递的宽度，但它破坏了整个表格。如果你修改（通过鼠标）其他列的列大小会出现。是flexbox的原因吗？我对flexbox不熟悉。

var ReactTable = ReactTable.default
class App extends React.Component 
  constructor() 
    super();
    this.state = 
      data: []
    ;
  
  render() 
    const  data  = this.state;
    return (
      <div>
        <ReactTable
          data=data
          columns=[
            
              Header: "Name",
              columns: [
                
                  width:'50',
                  Header: "First Name",
                  accessor: "firstName"
                ,
                
                  Header: "Last Name",
                  id: "lastName",
                  accessor: d => d.lastName
                
              ]
            ,
            
              Header: "Info",
              columns: [
                
                  Header: "Age",
                  accessor: "age"
                ,
                
                  Header: "Status",
                  accessor: "status"
                
              ]
            ,
            
              Header: 'Stats',
              columns: [
                
                  Header: "Visits",
                  accessor: "visits"
                
              ]
            
          ]
          defaultPageSize=10
          className="-striped -highlight"
        />
        <br />

      </div>
    );
  


ReactDOM.render(<App />, document.getElementById("app"));

<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>

<div id="app"></div>

如果有人可以将react-table 添加到标签中，我会很高兴。

【问题讨论】：

【参考方案1】：

我对 react-table 了解不多，但尽量不要使用引号

var ReactTable = ReactTable.default
class App extends React.Component 
  constructor() 
    super();
    this.state = 
      data: []
    ;
  
  render() 
    const  data  = this.state;
    return (
      <div>
        <ReactTable
          data=data
          columns=[
            
              Header: "Name",
              columns: [
                
                  Header: "First Name",
                  accessor: "firstName",
                  width: 50
                ,
                
                  Header: "Last Name",
                  id: "lastName",
                  accessor: d => d.lastName
                
              ]
            ,
            
              Header: "Info",
              columns: [
                
                  Header: "Age",
                  accessor: "age"
                ,
                
                  Header: "Status",
                  accessor: "status"
                
              ]
            ,
            
              Header: 'Stats',
              columns: [
                
                  Header: "Visits",
                  accessor: "visits"
                
              ]
            
          ]
          defaultPageSize=10
          className="-striped -highlight"
        />
        <br />

      </div>
    );
  


ReactDOM.render(<App />, document.getElementById("app"));

<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>

<div id="app"></div>

【讨论】：

这很奇怪，我确定我确实尝试过！也许我在编译结束之前刷新了页面。谢谢！【参考方案2】：

我对@987654321@了解不多，但是您可以通过将width设置为所有列来解决这个问题。

var ReactTable = ReactTable.default
class App extends React.Component 
  constructor() 
    super();
    this.state = 
      data: []
    ;
  
  render() 
    const  data  = this.state;
    return (
      <div>
        <ReactTable
          data=data
          columns=[
            
              Header: "Name",
              columns: [
                
                  width:'50',
                  Header: "First Name",
                  accessor: "firstName"
                ,
                
                  width:'100',
                  Header: "Last Name",
                  id: "lastName",
                  accessor: d => d.lastName
                
              ]
            ,
            
              Header: "Info",
              columns: [
                
                  width:'100',
                  Header: "Age",
                  accessor: "age"
                ,
                
                  width:'100',
                  Header: "Status",
                  accessor: "status"
                
              ]
            ,
            
              Header: 'Stats',
              columns: [
                
                  width:'100',
                  Header: "Visits",
                  accessor: "visits"
                
              ]
            
          ]
          defaultPageSize=10
          className="-striped -highlight"
        />
        <br />

      </div>
    );
  


ReactDOM.render(<App />, document.getElementById("app"));

<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>

<div id="app"></div>

【讨论】：

可以，但我希望其余列具有动态宽度，无论如何，谢谢。

如何在 HTML 中为表格内的列提供固定宽度？

】如何在HTML中为表格内的列提供固定宽度？【英文标题】：HowtogivefixedwidthforthecolumnsinsidetableinHTML?【发布时间】：2017-03-3005:23:03【问题描述】：P.S:请在阅读整个问题之前不要将其标记为重复我有一个table，我想为columns提供固定... 查看详情

HTML表格列宽：结合固定和可变宽度

】HTML表格列宽：结合固定和可变宽度【英文标题】：HTMLtablecolumnwidths:combiningfixedandvariablewidths【发布时间】：2012-01-0117:14:04【问题描述】：我已经做了一个这样的表：<tablestyle="width:1000px;"><tr><td>aaa</td><tdid="spa... 查看详情

在固定大小的表格中设置 JSF 列标题的宽度

】在固定大小的表格中设置JSF列标题的宽度【英文标题】：SetwidthforJSFcolumnheaderinfixed-sizetable【发布时间】：2012-09-2405:22:51【问题描述】：我有一个带有table-layout:fixed的JSF数据表，我正在尝试为每列设置基于百分比的宽度。我想... 查看详情

word中如何固定表格的宽和高

...卡，勾选“指定高度”，调整满意的高度值，行高值是“固定值”。3、然后选择“列”选项卡，勾选“指定列宽”，调整列宽为满意值。4、确定即可。参考技术A要固定表格的宽和高，可以执行如下操作步骤：1．选取整个表格... 查看详情

word如何固定表格宽度，使插入的图片适应表格宽度？

1：选中要插入图片的单元格，右键--》自动调整--》固定列宽2：选中要插入图片的单元格，右键--》表格属性--》行--》指定高度（自己设）--》行高值设成固定值OK了～参考技术A你好，你可以把复制过来的图片转换成图片形式，... 查看详情

使用 table-layout=auto 固定 HTML 表格中的宽度列

】使用table-layout=auto固定HTML表格中的宽度列【英文标题】：FixedwidthcolumninHTMLtablewithtable-layout=auto【发布时间】：2012-12-2923:48:17【问题描述】：当HTML表格将其table-layout设置为auto时，其列会自动调整大小。鉴于这种情况，有没有办... 查看详情

表格布局：固定忽略 td 的最小宽度

】表格布局：固定忽略td的最小宽度【英文标题】：table-layout:fixedignorestd\'smin-width【发布时间】：2011-10-2413:01:58【问题描述】：我有一个项目需要一个包含固定宽度和灵活宽度列的表格。无论浏览器的宽度如何，某些列的宽度始... 查看详情

html-table表格不被撑开，td某些列宽度固定某些列自适应

table-layout属性的解释：http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1，实现table细边框,设置如下css：table,tabletd,tableth{border:1pxsolid#ff0000;border-collapse:collapse;} 2，table表格宽度固定，同查看详情

HTML表格列宽实践

...描述（文本的长内容）、计数（最多3个字符）、日期（固定格式）。什么是好的做法？我正在考虑描述的固定宽度，计数和宽度（因此实际上也使名称“固定”宽度）。但我真正的问题是，如何选择特定的宽度尺寸。例如，如... 查看详情

列隐藏时固定表格布局调整大小

】列隐藏时固定表格布局调整大小【英文标题】：fixedtablelayoutresizewhencolumnishiding【发布时间】：2011-05-1415:42:41【问题描述】：我有一个固定的表格布局，宽度为425像素。这是一个有200行的表。当用户取消选择指定列的复选框时... 查看详情

如何将列具有固定宽度的 LaTeX 表格的单元格内容居中？

】如何将列具有固定宽度的LaTeX表格的单元格内容居中？【英文标题】：HowtocentercellcontentsofaLaTeXtablewhosecolumnshavefixedwidths?【发布时间】：2010-11-2408:59:38【问题描述】：考虑以下一段LaTeX代码：\\begintabularp1inp1inA&B\\\\C&D\\\\\\end... 查看详情

HTML 表格 - 固定和多变量列宽

】HTML表格-固定和多变量列宽【英文标题】：HTMLTable-Bothfixedandmultiplevariablecolumnwidths【发布时间】：2014-03-0606:47:00【问题描述】：我必须建立一个有5列的表格。表格宽度是可变的（内容宽度的50%）。一些列包含固定大小的按钮，... 查看详情

具有固定列和标题的可滚动表格，带有现代 CSS

】具有固定列和标题的可滚动表格，带有现代CSS【英文标题】：Scrollabletablewithfixedcolumnsandheader,withmodernCSS【发布时间】：2018-02-2618:28:58【问题描述】：如何使用现代CSS制作尽可能少的JavaScript表格？我想要的功能是：固定列（定... 查看详情

具有固定列表的固定标题不根据宽度响应

】具有固定列表的固定标题不根据宽度响应【英文标题】：Fixedheaderwithfixedcolumntableisnotresponsiveaccordingtowidth【发布时间】：2019-07-0621:56:15【问题描述】：我制作了一个带有固定标题和列的表格。但是在这里我已经指定了我不想要... 查看详情

如何获得固定的表格列宽

】如何获得固定的表格列宽【英文标题】：Howtogetfixedtablecolumnswidth【发布时间】：2012-01-0216:44:28【问题描述】：如何将单个表格列固定为特定宽度，以便无论该列中有多少文本，列的宽度都保持不变？<col>标签只适用... 查看详情

react-table 添加编辑/删除列

】react-table添加编辑/删除列【英文标题】：react-tableaddedit/deletecolumn【发布时间】：2018-08-0309:22:31【问题描述】：我使用Rails和React-Table来显示表格。到目前为止它工作正常。但是如何向React-Table添加编辑/删除列？有可能吗？return(... 查看详情

vue拖拽不固定列

前端框架AntDesignofVue表格使用vue-draggable-resizabl--固定列问题修复glass_Girl原创关注0点赞·289人阅读表格如果加了列拖拽功能，并且设置了列fixed。出现了一个头疼的现象问题：因为拖拽需要设置width。这个时候。你屏幕宽度超... 查看详情

css实现table固定宽度，超过单元格部分内容省略

...容的大小自适应的，没有内容的地方就挤到了一起。需要固定表格宽度和每一列的宽度。table-layout:fixed在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。white-space:now... 查看详情