Question

我试图根据窗口大小制作表格响应。我知道通过使其响应，您必须使用百分比而不是宽度的像素。无论如何，通过利用像素使其响应，例如width="1000px"代替width="100%"？

<table width="1000px" border="1">
<tr>
<td>hello</td>
<td>bye</td>
</tr>
</table>

- ＆GT;没有回应

<table width="100%" border="1">
<tr>
<td>hello</td>
<td>bye</td>
</tr> 
</table>

- ＆GT;响应

Answer 1

使用像素不是一个好习惯，但您可以使用媒体查询来解决它。它们允许您以某种分辨率更改页面样式。

Answer 2

像素为您的表提供固定宽度，因此它没有响应。使用javascript，您可以在调整窗口大小时更新宽度，但使用css百分比样式，它会更清晰。

使用html页面底部的javascript，您可以在表格中为表格元素提供响应宽度：＆＃39;

//resize function for the table
function resizeTable() {
  //find table by id and style the width with the window width in px
  document.getElementById("responsiveTable").style.width = window.innerWidth + 'px';
}

//do the resize on page load
resizeTable();
//do the resize on every window resize
window.onresize = resizeTable;

Answer 3

是的，你可以，但你必须在你的CSS中使用媒体查询。随着屏幕变宽，一旦视口超过媒体查询中定义的最小宽度，表格将展开。

例如：

table {width:300px}
@media(min-width:768px){
  table{width:500px}
}
@media(min-width:992px){
  table{width:800px}
}
@media(min-width:1200px){
  table{width:1000px}
}

因此，从窄/移动宽度开始，表格的宽度将从300px跳到500px，依此类推。

Answer 4

您可以使用jQuery尝试使用window.innerWidth：

$(document).ready(function(){
   $("table").width(window.innerWidth);
});

$(window).resize(function(){
   $("table").width(window.innerWidth);
});

Answer 5

试试这个。我认为这就是你所期待的。

<style>
#resp{
margin-left:auto;
margin-right:auto;
margin:center;
border:1px solid black;
width:900px;
max-width:100%;
}
</style>

<div id ="resp">
 <table width = "100%" border="1">
  <tr>
   <td>hello</td>
   <td>bye</td>
  </tr>
 </table> 
</div>

使用像素而不是百分比制作响应表

5 个答案: