logo标签列表

仅当屏幕宽度大于760像素时才调整表格大小。

javascriptjqueryhtmlcssresponsive
4
我希望制作一个响应式表格。我的目标是使其从表格转变为更像列表的形式，如此处所示。但是，尽管它仍然看起来像表格，我希望所有行的高度都与最高行相同。
我已经能够分别实现这些功能，但当我尝试将它们结合在一起时，调整大小会破坏类似列表的表格的格式。在下降到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代码中有两个错误：1- 在你的javascript代码中没有定义变量名为auto。2- 在$(window).resize(function () {事件中，你正在向resizeTable()函数发送一个对象($('#myTable'))，但是该函数期望一个字符串。 - EhsanT
我修复了第二个错误，但我不确定如何修复另一个错误。我想要的是像这样的东西：els.each(function() { $(this).height('auto');});。我认为。我只需要将高度重置为它们的原始值。抱歉，我真的很新手。@EhsanT - L. Nichols
3
使用tbl.rows[row].style.height=auto;这一行代码的问题是JavaScript认为auto是一个变量。你希望将值分配给height属性，因此需要将它放在引号中：tbl.rows[row].style.height='auto';。 - FluffyKitten
哦，我的天啊。引号……这太棒了。非常感谢你！@FluffyKitten - L. Nichols
很高兴我能帮到你 :) - FluffyKitten
2个回答
0
尝试使用百分比而不是实际的像素值来设置宽度/填充/其他属性。这样，属性会相对于窗口大小进行调整。
-1

你需要在项目中使用media.css，并将窗口宽度定义为表格宽度

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接