文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >隐藏列时如何保留表列的宽度？

问隐藏列时如何保留表列的宽度？
EN

Stack Overflow用户
提问于 2018-10-07 09:04:15
回答 2查看 2.3K关注 0票数 0

我有一个表，它有六列，其中五列可以根据用户选择来隐藏。我遇到的问题是，当一个列被隐藏时，所有其他列都会展开，以填充隐藏列占用的空间。相反，我想要发生的是，该列只是隐藏，其余的列移到左边，同时保留给定的宽度。我在这里找到的任何答案似乎都没有涉及这一特定问题。

下面是我的js和css以及屏幕抓取的片段。

联署材料：

代码语言：javascript
复制
      <table className="hours table table-bordered table-sm" table-layout="fixed">
        <thead>
          <tr>
            <th scope="col"
              colSpan="3"
              className="row-dow"
            >
              Hours
            </th>
            <th
              scope="col"
              colSpan="2"
              align="center"
              hidden={this.state.kitchenHoursSame}
              className="row-16"
            >
              Kitchen Hours
            </th>
            <th
              scope="col"
              colSpan="2"
              align="center"
              hidden={!this.state.breakfast}
              className="row-16"
            >
              Breakfast Special
            </th>
            ...
          </tr>
          <tr>
            <th
              scope="col"
            // className="row-8 "
            >
              Day
            </th>
            <th
              scope="col"
              className="row-8"
            >
              Open
            </th>
            <th
              scope="col"
              className="row-8"
            >
              Close
            </th>
            <th
              scope="col"
              hidden={this.state.kitchenHoursSame}
              className="row-8"
            >
              Open
            </th>
            <th
              scope="col"
              hidden={this.state.kitchenHoursSame}
              className="row-8"
            >
              Close
            </th>
            <th
              scope="col"
              hidden={!this.state.breakfast}
              className="row-8"
            >
              1234567890123
            </th>
            <th
              scope="col"
              hidden={!this.state.breakfast}
              className="row-8"
            >
              End
            </th>
            ...
          </tr>
        </thead>
        <tbody>
          {this.state.DOW.map((dowList, i) =>
            <tr>
              <th scope="row" key={dowList.i}>{dowList.long}</th>
              <td>
                <select name="timeofday"
                  value={this.state.timeofday}
                  onChange={this.handleInputChange}>
                  <option>
                    (open)
                  </option>
                </select>
              </td>
              ...
            </tr>
          )}
        </tbody>
      </table>

css：

代码语言：javascript
复制
.hours {
    table-layout: fixed;
    /* width: 90%; */
    width: 1500px;
    white-space: nowrap;
  }
  .hours td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


.row-dow {
    width: 20px;
  }
.row-16 {
  width: 16px;
}
.row-8 {
  width: 8px;
}

​

​

​

​

即使有人告诉我，我不应该使用表格，也应该使用其他的东西，任何帮助都是非常感激的。

css
reactjs
html-table
css-tables
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-07 11:47:54

下面的片段显示了删除列时不同宽度定义的表的行为。

​

代码语言：javascript
复制
window.addEventListener("load", () => {
  const firstTDs = Array.from(
    document.querySelectorAll("td:nth-child(3)")
  ).concat(Array.from(document.querySelectorAll("th:nth-child(3)")));

  document.querySelector(".remove").addEventListener(
    "click",
    () => {
      firstTDs.forEach(td => {
        td.parentNode.removeChild(td);
      });
    },
    { once: true }
  );
});
代码语言：javascript
复制
.full-width {
  width: 100%;
}

.fixed-width {
  width: 600px;
}
代码语言：javascript
复制
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">


<h5>Auto width</h5>
<table class="tbl mdl-data-table mdl-shadow--2dp">
	<thead>
		<tr>
			<th class="mdl-data-table__cell--non-numeric">Material</th>
			<th>Unit price</th>
			<th>Quantity</th>
			<th>Unit price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
			<td>$2.90</td>
			<td>25</td>
			<td>$2.90</td>
		</tr>
		<tr>
			<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
			<td>$1.25</td>
			<td>50</td>
			<td>$1.25</td>
		</tr>
		<tr>
			<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
			<td>$2.35</td>
			<td>10</td>
			<td>$2.35</td>
		</tr>
	</tbody>
</table>


<h5>Full width</h5>
<table class="full-width mdl-data-table mdl-shadow--2dp">
	<thead>
		<tr>
			<th class="mdl-data-table__cell--non-numeric">Material</th>
			<th>Unit price</th>
			<th>Quantity</th>
			<th>Unit price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
			<td>$2.90</td>
			<td>25</td>
			<td>$2.90</td>
		</tr>
		<tr>
			<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
			<td>$1.25</td>
			<td>50</td>
			<td>$1.25</td>
		</tr>
		<tr>
			<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
			<td>$2.35</td>
			<td>10</td>
			<td>$2.35</td>
		</tr>
	</tbody>
</table>

<h5>Fixed width</h5>
<table class="fixed-width mdl-data-table mdl-shadow--2dp">
	<thead>
		<tr>
			<th class="mdl-data-table__cell--non-numeric">Material</th>
			<th>Unit price</th>
			<th>Quantity</th>
			<th>Unit price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
			<td>$2.90</td>
			<td>25</td>
			<td>$2.90</td>
		</tr>
		<tr>
			<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
			<td>$1.25</td>
			<td>50</td>
			<td>$1.25</td>
		</tr>
		<tr>
			<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
			<td>$2.35</td>
			<td>10</td>
			<td>$2.35</td>
		</tr>
	</tbody>
</table>

<h5>Actions</h5>

<button class="remove mdl-button mdl-button--raised">Remove Quantity</button>

​

票数 2
EN

Stack Overflow用户

发布于 2018-10-07 09:52:10

如果每次呈现表内容都没有问题，可以使用css属性visibility: hidden;来处理，该属性隐藏了在dom中占用空间的元素。

见：visibilty hidden

方法:

  • 我没有在th或td上使用class = hideColumn属性，而是使用定义了的class = hideColumn来隐藏元素。
  • 下一个border: none从元素中移除边框。 在您的情况下，您还可以使用'class‘属性来实现这一点。

如果这没有帮助，请在评论中告诉我，

或者如果我们能做些什么来接近所需的解决方案的话。

​

代码语言：javascript
复制
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    font-size: 10px;
}

.hideColumn {
    visibility: hidden;
    border: none;
}

h2 { 
    font-size: 12px;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
代码语言：javascript
复制
<h2>Visible All Column Table</h2>

<table>
  <tr>
    <th >Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr >
    <td >Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
<br>
<h2>Hidden 1st Column Table</h2>

<table>
  <tr>
    <th class='hideColumn'>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr >
    <td class='hideColumn'>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td class='hideColumn'>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
<br>
<h2>Hidden 2nd Column Table</h2>

<table>
  <tr>
    <th >Company</th>
    <th class='hideColumn'>Contact</th>
    <th>Country</th>
  </tr>
  <tr >
    <td >Alfreds Futterkiste</td>
    <td class='hideColumn'>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td >Centro comercial Moctezuma</td>
    <td class='hideColumn'>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

​

方法2:

  • 只需使文本透明。

​

代码语言：javascript
复制
.otherDiv table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    font-size: 10px;
    border: 1px solid #dddddd;
}

.otherDiv .hideColumn {
    color: transparent;
}

h2 { 
    font-size: 12px;
}

.otherDiv td, th {
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
代码语言：javascript
复制
<div class='otherDiv'>
<h2>Visible All Column Table</h2>

<table>
  <tr>
    <th >Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr >
    <td >Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
<br>
<h2>Hidden 1st Column Table</h2>

<table>
  <tr>
    <th class='hideColumn'>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr >
    <td class='hideColumn'>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td class='hideColumn'>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
<br>
<h2>Hidden 2nd Column Table</h2>

<table>
  <tr>
    <th >Company</th>
    <th class='hideColumn'>Contact</th>
    <th>Country</th>
  </tr>
  <tr >
    <td >Alfreds Futterkiste</td>
    <td class='hideColumn'>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td >Centro comercial Moctezuma</td>
    <td class='hideColumn'>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

</div>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52686985

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档