仅当屏幕高于 760 像素时才调整表格大小答案

【问题标题】：Resize table only if screen above 760px仅当屏幕高于 760 像素时才调整表格大小
【发布时间】：2018-03-27 06:40:55
【问题描述】：

我想制作一个响应式表格。我的目标是让它从表格转换为更多列表，如here 所示。然而，虽然它看起来仍然像一张桌子，但我希望所有的行都具有最高行的高度。

我已经能够使这些单独工作，但是当我尝试将它们组合起来时，调整大小会弄乱类似列表的表格的格式。当我低于 760 像素时，如何在调整大小之前重置表格的初始状态？

这是我目前拥有的 html：

function resizeTable(tableID){
	var tbl=document.getElementById(tableID), row=0;


	if ($(window).width() > 760) {
		var biggestRow=0, rowHeight=0;
		for (row=0; row < tbl.rows.length; row++) {     //find biggest row height
			rowHeight=parseInt(tbl.rows[row].offsetHeight);
			if (rowHeight > biggestRow) {biggestRow=rowHeight;}
		}
		for (row=0; row < tbl.rows.length; row++) {     //set all rows to biggest row height
			tbl.rows[row].style.height=biggestRow + "px";
		}
	} else {
		for (row=0; row < tbl.rows.length; row++) {     
			tbl.rows[row].style.height='auto';
		}
	}
} 

$(window).resize(function () {
	resizeTable('myTable');
});

table { 
    width: 100%; 
    border-collapse: collapse; 
}
/* Zebra striping */
.myTable tr:nth-of-type(odd) { 
    background: #eee; 
}

.myTable th { 
    background: #3F3F3F; 
    color: white; 
    font-weight: bold; 
}
td, th { 
    padding: 6px;
    border: 1px solid #ccc; 
    text-align: left; 
} 
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.myTable tr { border: 1px solid #ccc; }

	.myTable td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}

	.myTable td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}

	/*
	Label the data
	*/
	.myTable td:nth-of-type(1):before { content: "Date"; }
	.myTable td:nth-of-type(2):before { content: "Title"; }
	.myTable td:nth-of-type(3):before { content: "Speaker(s)"; }
	.myTable td:nth-of-type(4):before { content: "Institution"; }
}

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body onload="resizeTable('myTable');">
	<div class="myTable">
		<table id="myTable">
			<thead>
				<tr>
					<th class="c1">Date</th>
					<th class="c2">Title</th>
					<th class="c3">Speaker(s)</th>
					<th class="c4">Institution</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>09/01</td>
					<td>Departmental Research - Hard Matter</td>
					<td>Drs. J. Cui, S. Mishra, X. Shen and T. Hoan</td>
					<td>University of Memphis</td>
				</tr>
				<tr>
					<td>09/08</td>
					<td>Departmental Research - Soft Matter</td>
					<td>Drs. S. Jahan, M. Laradji, F. Sabri and P. Pradhan</td>
					<td>University of Memphis</td>
				</tr>
				<tr>
					<td>09/15</td>
					<td>Super-paramagnetic Relaxations in Magnetic Nanoparticles</td>
					<td>Sunghyun Yoon</td>
					<td>Gunsan National University, Korea & University of Memphis</td>
				</tr>
				<tr>
					<td>09/22</td>
					<td>Simulating Disorder in Functional Materials</td>
					<td>Tom Berlijn</td>
					<td>Oak Ridge National Lab</td>
				</tr>
				<tr>
					<td>09/29</td>
					<td>Computational Self-Assembly on Lipid Membranes</td>
					<td>Alexander D. Olinger</td>
					<td>University of Memphis</td>
				</tr>
				<tr>
					<td>10/06</td>
					<td>No seminar. Materials Day</td>
					<td>Dr. Mishra</td>
					<td>University of Memphis</td>
				</tr>
				<tr>
					<td>10/13</td>
					<td>Electro- and Photocatalytics H2 Production by Molecular Co Complexes with Pentantate Ligands</td>
					<td>Xuan Zhao</td>
					<td>University of Memphis</td>
				</tr>
				<tr>
					<td>10/20</td>
					<td>Van der Waals Heterojunctions with Two-dimensional Materials for Low Power Electronics</td>
					<td>Tania Roy</td>
					<td>University of Central Florida</td>
				</tr>
				<tr>
					<td>10/27</td>
					<td>Hearing the Shape of a Drum: Characterization of Biological Tissue Microstructure Using Advanced Diffusion MR Imaging</td>
					<td>Junzhong Xu</td>
					<td>Vanderbilt University</td>
				</tr>
				<tr>
					<td>11/03</td>
					<td>Ultrafast Spectroscopy of Nanomaterials for Energy Applications</td>
					<td>Kannatassen Appavoo</td>
					<td>University of Alabama at Birmingham</td>
				</tr>
				<tr>
					<td>11/10</td>
					<td>Prediction and Alteration of Surface Wettability</td>
					<td>Jian Liu</td>
					<td>Vanderbilt University</td>
				</tr>
				<tr>
					<td>11/17</td>
					<td>The Role of Phospholipid Membrane's Shape in Cellular Function</td>
					<td>Eric Spangler</td>
					<td>University of Memphis</td>
				</tr>
			</tbody> 
		</table>
	</div>
</body>

【问题讨论】：

您的 javascript 中有 2 个错误：1-您的 javascript 中没有定义变量名称 auto。 2- 在$(window).resize(function () { 事件中，您正在向resizeTable() 函数发送一个对象（$('#myTable')），但该函数需要一个字符串
我修复了第二个错误，但我不确定如何修复另一个错误。我想要的是这样的：els.each(function() { $(this).height('auto');});。我想。我只需要将高度重置为原始值。抱歉，我对这些东西真的很陌生。 @EhsanT
tbl.rows[row].style.height=auto; 行的问题在于 javascript 认为 auto 是一个变量。您正在尝试分配 auto 的值，因此您需要将其放在引号中：tbl.rows[row].style.height='auto';
天哪。行情..这很好用。太感谢了！ @FluffyKitten
很高兴我能帮上忙 :)

标签： javascript jquery html css responsive

【解决方案1】：

您必须在项目中使用 media.css 并将窗口宽度定义为表格宽度

@media (max-width:760px) {
     .your-class {width: 50%}
}

你可以为不同的屏幕设置不同的宽度

【讨论】：

【解决方案2】：

尝试使用 % 作为宽度/填充/其他属性，而不是 px 中的实际值。这样，属性会根据窗口大小调整大小

【讨论】：