具有多个单元格的表未调整为窗口

Question

我的问题是我有一张桌子，并没有调整窗口大小。我将overflow设置为hidden，我希望它保持这种状态。我希望能够在桌面内滚动。

这是一个JSFiddle https://jsfiddle.net/4mgocaLu/1/

html,
body {
  margin: 0;
  padding: 0;
  padding-right: 2px;
  padding-left: 2px;
  padding-bottom: 2px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  text-align: left;
  padding: 8px;
  overflow: scroll;
}

<div>
  <table>
    <tr>
      <th>Test</th>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
    </tr>
  </table>
</div>

Answer 1

试试这个 它设置了一个最大宽度为800px的宽度作为示例，如果您愿意，可以将其更改为最小值不低于200px。

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    max-width:800px;
    min-width:200px;
}

我希望这就是你的意思

Answer 2

我通过添加

修复了它

overflow-y: scroll;
min-height: .01%;
height: 350px;
max-width: 100%;
padding: 10px;

到div

Answer 3

添加下面的css代码

.tableResponsive {
    overflow-x: auto;
    min-height: .01%;
    max-width:100%;
    padding:10px;
}

<强> jsfiddle code

＆＃13;

＆＃13;

html, body {
	margin: 0;
	padding: 0;
	padding-right: 2px;
	padding-left: 2px;
	padding-bottom: 2px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.tableResponsive {
    overflow-x: auto;
    min-height: .01%;
    max-width:100%;
    padding:10px;
}

table {
	font-family: arial, sans-serif;
	border-collapse: collapse;
	width: 100%;
}

th, td {
	border: 1px solid black;
	text-align: left;
	padding: 8px;
}

＆＃13;

<div class="tableResponsive">
	<table>
		<tr>
			<th>Test</th>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
		<tr>
			<td>Hello</td>
		</tr>
	</table>
</div>

＆＃13;

＆＃13;

＆＃13;