Question

问题是我在有桌子的地方有可调整大小的窗口。但是我需要这张桌子应该一直都一样大。当我缩小它时，它只会溢出滚动条。

screen上有两个表：左边是我需要的，右边是我拥有的。

如您所见，它不会在垂直方向和水平方向上溢出，而是以某种方式收缩到某个关键位置，而只会溢出。

谢谢

.customtable {
	font-size: 14px;
}

.customtable-title {
	color: #fff;
    background: linear-gradient(to bottom, #60748c 0, #48586b 33%, #303030 100%);
	text-align: left;
}

.customtable-title-cell {
	padding-top: 5px;
    padding-bottom: 5px;
    padding: .5em .6em .4em .6em;
	white-space: nowrap;
    text-overflow: ellipsis;
}

.customtable-title-cell:hover {
	opacity: .8;
	background-image: none, linear-gradient(to bottom, rgba(255,255,255,.4) 0%, rgba(255,255,255,.0) 100%);
    background-position: 50% 50%;
}

.customtable-title-cell:nth-child(even) {
	border-style: solid;
    border-width: 0 0 0 1px;
	border-color: #d5d5d5;
}

.customtable-grid-row:nth-child(odd) {
	background-color: #afafaf;
	color: #000000;
}

.customtable-grid-row:nth-child(even) {
	background-color: #4e4e4e;
	color: #ededed;
}

.customtable-grid-row:hover {
	background-image: none, linear-gradient(to bottom, rgba(255,255,255,.4) 0%, rgba(255,255,255,.0) 100%);
    background-position: 50% 50%;
}

.customtable-grid-row td {
	padding-top: 5px;
    padding-bottom: 5px;
    line-height: normal;
    padding: .4em .6em;
	white-space: nowrap;
    text-overflow: ellipsis;
}

.customtable-grid-row td:nth-child(even) {
	border-style: solid;
    border-width: 0 0 0 1px;
	border-color: #d5d5d5;
}

<div class = "customtable" style="overflow:auto;">
	<div>
		<table style="table-layout: fixed;">
			<colgroup>
				<col style="width:100px">
				<col style="width:100px">
			</colgroup>
			<thead class="customtable-title">
				<tr>
					<th class="customtable-title-cell">Month</a></th>
					<th class="customtable-title-cell">Sales</a></th>
				</tr>
			</thead>
		</table>
	</div>
	<div>
		<table style="table-layout: fixed;">
			<colgroup>
				<col style="width:100px">
				<col style="width:100px">
			</colgroup>
			<tbody>
				<tr class="customtable-grid-row">
					<td>January</td>
					<td>$ 50,000.00</td>
				</tr>
				<tr class="customtable-grid-row">
					<td>February</td>
					<td>$ 10,000.00</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

Answer 1

您所能做的就是将表格放在具有固定高度和宽度的div中，并将表格的高度和宽度设置为固定值。例如这样的

.fixed-div{
    height: 180px;
    width: 160px;
    overflow-y: scroll;
    overflow-x: auto;
}

.fixed-table{
    width: 200px;
}

这是您的整个代码，其中包含一些其他小的修复程序（我还创建了一些额外的行只是为了展示其工作原理）：

.fixed-div{
    height: 180px;
    width: 160px;
    overflow-y: scroll;
    overflow-x: auto;
}

.fixed-table{
    width: 200px;
}

.customtable {
	font-size: 14px;
}

.customtable-title {
	color: #fff;
    background: linear-gradient(to bottom, #60748c 0, #48586b 33%, #303030 100%);
	text-align: left;
}

.customtable-title-cell {
	padding-top: 5px;
    padding-bottom: 5px;
    padding: .5em .6em .4em .6em;
	white-space: nowrap;
    text-overflow: ellipsis;
}

.customtable-title-cell:hover {
	opacity: .8;
	background-image: none, linear-gradient(to bottom, rgba(255,255,255,.4) 0%, rgba(255,255,255,.0) 100%);
    background-position: 50% 50%;
}

.customtable-title-cell:nth-child(even) {
	border-style: solid;
    border-width: 0 0 0 1px;
	border-color: #d5d5d5;
}

.customtable-grid-row:nth-child(odd) {
	background-color: #afafaf;
	color: #000000;
}

.customtable-grid-row:nth-child(even) {
	background-color: #4e4e4e;
	color: #ededed;
}

.customtable-grid-row:hover {
	background-image: none, linear-gradient(to bottom, rgba(255,255,255,.4) 0%, rgba(255,255,255,.0) 100%);
    background-position: 50% 50%;
}

.customtable-grid-row td {
	padding-top: 5px;
    padding-bottom: 5px;
    line-height: normal;
    padding: .4em .6em;
	white-space: nowrap;
    text-overflow: ellipsis;
}

.customtable-grid-row td:nth-child(even) {
	border-style: solid;
    border-width: 0 0 0 1px;
	border-color: #d5d5d5;
}

<div class="customtable" style="overflow:auto;">
	<div class="fixed-div">
		<table style="table-layout: fixed;" class="fixed-table">
			<colgroup>
				<col style="width:100px">
				<col style="width:100px">
			</colgroup>
			<thead class="customtable-title">
				<tr>
					<th class="customtable-title-cell">Month</th>
					<th class="customtable-title-cell">Sales</th>
				</tr>
			</thead>

			<tbody>
				<tr class="customtable-grid-row">
					<td>January</td>
					<td>$ 50,000.00</td>
				</tr>
				<tr class="customtable-grid-row">
					<td>February</td>
					<td>$ 10,000.00</td>
				</tr>
								<tr class="customtable-grid-row">
					<td>January</td>
					<td>$ 50,000.00</td>
				</tr>
				<tr class="customtable-grid-row">
					<td>February</td>
					<td>$ 10,000.00</td>
				</tr>
								<tr class="customtable-grid-row">
					<td>January</td>
					<td>$ 50,000.00</td>
				</tr>
				<tr class="customtable-grid-row">
					<td>February</td>
					<td>$ 10,000.00</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

Demo

Answer 2

您的 customtable div需要明确的高度和宽度值，否则它将拉伸以适合其内容

调整大小块时固定表的大小

2 个答案: