0

我正在使用 flexbox 创建一个表。它有固定的标题和可滚动的正文。在 Windows 上，当使用 将滚动条添加到正文中overflow-y: auto时，标题和行之间的左对齐会中断。因为在 Windows 上，滚动条从正文中占用了一些额外的空间，但标题仍然获得相同的空间。当滚动条添加到正文中时，有什么方法可以压缩标题宽度？

我想确保当滚动条存在时标题和正文的宽度相同，即使它不存在也是如此。

    &__item, &--header__item {
      position: relative;
      flex-basis: 20%;
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      &.sm, &.lg {
        flex-grow: 0;
      }
      &.sm {
        flex-basis: 40px;
      }
    }
<!-- Header HTML -->

    <ul class="table-list-container">
      <li class="table-list-row">
        <ul class="table-list header">
          <li class="table-list&#45;&#45;header__item sm text-center">
          </li>
          <li class="table-list&#45;&#45;header__item md-padding-left-10">
            Header 1
          </li>
          <li class="table-list&#45;&#45;header__item">
            Header 2
          </li>
          <li class="table-list&#45;&#45;header__item">
            Header 3
          </li>
          <li class="table-list&#45;&#45;header__item text-center">
            Header 4
          </li>
        </ul>
      </li>
    </ul>

<!-- Body HTML -->

    <div style="height: 305px" class="scrollable">
      <ul class="table-list-container">
        <li class="table-list-row">
          <ul class="table-list body">
            <li class="table-list__item sm text-center">
              <input type="checkbox">
            </li>
            <li class="table-list__item md-padding-left-10">Data</li>
            <li class="table-list__item">Data</li>
            <li class="table-list__item">Data</li>
            <li class="table-list__item text-center">Data</li>
          </ul>
        </li>
      </ul>
    </div>

4

2 回答 2

3 
overflow-y: overlay;

为我工作。由于现在滚动条将从现有表空间中占用空间而不是额外空间，因此列标题和行完全对齐。

警告：您需要确保您的最后一列在添加滚动条后有足够的空间来显示其内容，因为滚动条是从那里获得其空间的。

于 2016-08-18T14:39:54.627 回答
1

这是一个工作演示

body{
	margin: 0;
}
.table{
	display: flex;
	flex-wrap: wrap;
}
ul{
	display: flex;
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
}
li{
	flex: 5;
	/* width: 15%; */
	padding: 10px;
}
.scrollable{
	width: 100%;
	margin-top: 80px;
}
li.empty{
	/* max-width: 12px; */
	flex:1;
}
.header{
	position: fixed;
	height: 80px;
	z-index: 5;
	background: red;
}
<div class="table">

	<ul class="table-list-container header">
		<li class="table-list-row">
			<ul class="table-list header">
				<li class="table-list&#45;&#45;header__item sm text-center empty">
				</li>
				<li class="table-list&#45;&#45;header__item md-padding-left-10">
					Header 1
				</li>
				<li class="table-list&#45;&#45;header__item">
					Header 2
				</li>
				<li class="table-list&#45;&#45;header__item">
					Header 3
				</li>
				<li class="table-list&#45;&#45;header__item text-center">
					Header 4
				</li>
			</ul>
		</li>
	</ul>

	<div style="height: 305px" class="scrollable">
		<ul class="table-list-container"> 
			<li class="table-list-row">
				<ul class="table-list body">
					<li class="table-list__item sm text-center empty">
						<input type="checkbox">
					</li>
					<li class="table-list__item md-padding-left-10">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
					<li class="table-list__item">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
					<li class="table-list__item">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
					<li class="table-list__item text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
				</ul>
			</li>
		</ul>
	</div>
</div>

于 2016-08-18T07:22:45.390 回答