Question

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

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

这是我到目前为止的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>

Answer 1

尝试使用％作为宽度/填充/其他属性而不是px中的实际值。这样，相对于窗口大小

调整属性的大小

Answer 2

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

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

您可以设置不同的屏幕宽度

仅当屏幕高于760px

2 个答案: