html - 如何阻止表格自行调整大小以适应屏幕？

标签 html css html-table resize

我已经尝试将宽度设置为特定值 (1300px)，但它不会改变任何东西......

我从别人那里得到了这段代码，我是初学者所以请在这里帮助我。提前致谢。

以下是代码:点击 Next Iteration!直到添加的列超出您的窗口范围。你会明白我的意思。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="JavaScript"> function addCell(start, end) { counter = 0;for (i= 0; i< document.getElementById("Table").rows.length; i++){ if (document.getElementById("Table").rows[i].cells[0].innerHTML != ""){counter++;}if (start<=counter && counter<=end && document.getElementById("Table").rows[i].cells[1].innerHTML != "" && document.getElementById("Table").rows[i].cells[1].innerHTML != "Variable Values"){var x = document.getElementById("Table").rows[i].insertCell(-1); x.innerHTML = document.getElementById("Table").rows[i].cells[1].innerHTML;}}}
function deleteCell(start, end) {counter = 0; for (i= 0; i< document.getElementById("Table").rows.length; i++){if (document.getElementById("Table").rows[i].cells[0].innerHTML != ""){counter++;}if (start<=counter && counter<=end && document.getElementById("Table").rows[i].cells[1].innerHTML != ""){if (document.getElementById("Table").rows[i].cells[1].innerHTML != "Variable Values"){if (document.getElementById("Table").rows[i].cells.length>2){document.getElementById("Table").rows[i].deleteCell(-1);}}}}}</SCRIPT>
<title>Tracing Table</title>
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<style type="text/css">
ol.nested {
counter-reset: item}
li.nested {display: block}
li.nested:before {
content: counters(item, ".") ". ";
counter-increment: item}
.mainimage { max-width: 100%}
.thumbnail {position: relative;z-index: 0;}
.thumbnail:hover {background-color: transparent; z-index: 50;}
.thumbnail span { position: absolute;visibility: hidden;color: black;text-decoration: none;}
.thumbnail span img { border-width: 0;}
.thumbnail:hover span { visibility: visible;top: 0; left: 60px;}
table {font-family: arial, sans;border-collapse: collapse;table-layout: fixed;}
table .var {width: 100%;}
table .stm {width: auto;}
th,td {border: 2px solid black; padding: 5px;}
td.left {text-align: left;}
tr.header th {background-color: #C3D9FF;color: black;}
tr.variables td {background-color: #F9F9F9;color: black;}
tr.statement td {background-color: #E5ECF9;color: black;font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New",Courier, monospace;ont-size: 1em !important;white-space: nowrap;}
td.bg {background-image: url(images/lab-icon.png);background-repeat: no-repeat;background-size: auto;background-position: center;}
td a:hover img,a:hover span {background-color: #3CB4F6;}
textarea {resize: both;height: 15px;overflow: auto;}
 </style>
</head>
<body onload="prettyPrint()">
<h1>Tracing Table</h1>
<hr />
<table id="Table">
<tr class = "header">
<th>Statement</th>
<th>Variable Values</th>
</tr>
<tr class="statement">
<td><code class="prettyprint">public class Test {
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">public static void main(String[] args) {
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">int a = 0; 
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">System.out.println("import ");
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">ArrayList&ltInteger&gt list = new ArrayList&ltInteger&gt();
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
<br>list = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">while (a &lt 1) {
<button type="button" onclick="addCell(7,17)"><span class="nocode">Next Iteration!</span></button>
<button type="button" onclick="deleteCell(7,17)"><span class="nocode">Go back!</span></button>
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">for (int x = 0; x &lt 5; x++) {
<button type="button" onclick="addCell(8,16)"><span class="nocode">Next Iteration!</span></button>
<button type="button" onclick="deleteCell(8,16)"><span class="nocode">Go back!</span></button>
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
<br>list = <textarea cols="30" rows="1"></textarea>
<br>x = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">for (int y = 0; y &lt 5; y++) {
<button type="button" onclick="addCell(9,14)"><span class="nocode">Next Iteration!</span></button>
<button type="button" onclick="deleteCell(9,14)"><span class="nocode">Go back!</span></button>
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
<br>list = <textarea cols="30" rows="1"></textarea>
<br>x = <textarea cols="30" rows="1"></textarea>
<br>y = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">for (int z = 0; z &lt 5; z++) {
<button type="button" onclick="addCell(10,12)"><span class="nocode">Next Iteration!</span></button>
<button type="button" onclick="deleteCell(10,12)"><span class="nocode">Go back!</span></button>
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
<br>list = <textarea cols="30" rows="1"></textarea>
<br>x = <textarea cols="30" rows="1"></textarea>
<br>y = <textarea cols="30" rows="1"></textarea>
<br>z = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">a++;
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
<br>list = <textarea cols="30" rows="1"></textarea>
<br>x = <textarea cols="30" rows="1"></textarea>
<br>y = <textarea cols="30" rows="1"></textarea>
<br>z = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">}
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">y++;
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
<br>list = <textarea cols="30" rows="1"></textarea>
<br>x = <textarea cols="30" rows="1"></textarea>
<br>y = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">}
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">x++;
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
<br>list = <textarea cols="30" rows="1"></textarea>
<br>x = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">}
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">a++;}
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
<br>list = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">list.add(a);
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
<br>list = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">boolean ok = list.add(a);
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
<br>list = <textarea cols="30" rows="1"></textarea>
<br>ok = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">insert(list, a, 2);
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>a = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
<br>list = <textarea cols="30" rows="1"></textarea>
<br>ok = <textarea cols="30" rows="1"></textarea>
<br>2 = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">}
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">private static void insert(ArrayList&ltInteger&gt list, int a, int n) {
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>list = <textarea cols="30" rows="1"></textarea>
<br>a = <textarea cols="30" rows="1"></textarea>
<br>n = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">while (true)
<button type="button" onclick="addCell(23,30)"><span class="nocode">Next Iteration!</span></button>
<button type="button" onclick="deleteCell(23,30)"><span class="nocode">Go back!</span></button>
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">{
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">int kk = 22;
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>list = <textarea cols="30" rows="1"></textarea>
<br>a = <textarea cols="30" rows="1"></textarea>
<br>n = <textarea cols="30" rows="1"></textarea>
<br>kk = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">while(true)
<button type="button" onclick="addCell(26,27)"><span class="nocode">Next Iteration!</span></button>
<button type="button" onclick="deleteCell(26,27)"><span class="nocode">Go back!</span></button>
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">{int mn = 2, ll = 3; break;}
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>list = <textarea cols="30" rows="1"></textarea>
<br>a = <textarea cols="30" rows="1"></textarea>
<br>n = <textarea cols="30" rows="1"></textarea>
<br>kk = <textarea cols="30" rows="1"></textarea>
<br>mn = <textarea cols="30" rows="1"></textarea>
<br>ll = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">System.out.println();
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>list = <textarea cols="30" rows="1"></textarea>
<br>a = <textarea cols="30" rows="1"></textarea>
<br>n = <textarea cols="30" rows="1"></textarea>
<br>kk = <textarea cols="30" rows="1"></textarea>
<br>System.out = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">break;
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">}
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">list.add(a);
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>list = <textarea cols="30" rows="1"></textarea>
<br>a = <textarea cols="30" rows="1"></textarea>
<br>n = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">}
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">public static void main2(String[] args) {
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">SimpleWriter out = new SimpleWriter1L();
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>out = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">final int[] values = { 8, -4, 3, 0, -5 };
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>out = <textarea cols="30" rows="1"></textarea>
<br>values = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">int i = 0;
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>out = <textarea cols="30" rows="1"></textarea>
<br>values = <textarea cols="30" rows="1"></textarea>
<br>i = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">while (i &lt values.length) {
<button type="button" onclick="addCell(37,48)"><span class="nocode">Next Iteration!</span></button>
<button type="button" onclick="deleteCell(37,48)"><span class="nocode">Go back!</span></button>
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">int remainder = values[i] % 2;
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>out = <textarea cols="30" rows="1"></textarea>
<br>values = <textarea cols="30" rows="1"></textarea>
<br>i = <textarea cols="30" rows="1"></textarea>
<br>remainder = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">if (remainder == 1) {
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">out.println("odd");
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>out = <textarea cols="30" rows="1"></textarea>
<br>values = <textarea cols="30" rows="1"></textarea>
<br>i = <textarea cols="30" rows="1"></textarea>
<br>remainder = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">int x = 2;
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>out = <textarea cols="30" rows="1"></textarea>
<br>values = <textarea cols="30" rows="1"></textarea>
<br>i = <textarea cols="30" rows="1"></textarea>
<br>remainder = <textarea cols="30" rows="1"></textarea>
<br>x = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">int z = 3;
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>out = <textarea cols="30" rows="1"></textarea>
<br>values = <textarea cols="30" rows="1"></textarea>
<br>i = <textarea cols="30" rows="1"></textarea>
<br>remainder = <textarea cols="30" rows="1"></textarea>
<br>x = <textarea cols="30" rows="1"></textarea>
<br>z = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">} else {
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">int y= 3;
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>out = <textarea cols="30" rows="1"></textarea>
<br>values = <textarea cols="30" rows="1"></textarea>
<br>i = <textarea cols="30" rows="1"></textarea>
<br>remainder = <textarea cols="30" rows="1"></textarea>
<br>y = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">out.println("even");
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>out = <textarea cols="30" rows="1"></textarea>
<br>values = <textarea cols="30" rows="1"></textarea>
<br>i = <textarea cols="30" rows="1"></textarea>
<br>remainder = <textarea cols="30" rows="1"></textarea>
<br>y = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">}
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">i = i + 1;
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>out = <textarea cols="30" rows="1"></textarea>
<br>values = <textarea cols="30" rows="1"></textarea>
<br>i = <textarea cols="30" rows="1"></textarea>
<br>remainder = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">}
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">out.close();
</code></td>
<td></td>
</tr>
<tr class="variables">
<td></td>
<td width: 100px>out = <textarea cols="30" rows="1"></textarea>
<br>values = <textarea cols="30" rows="1"></textarea>
<br>i = <textarea cols="30" rows="1"></textarea>
</td>
</tr>
<tr class="statement">
<td><code class="prettyprint">}
</code></td>
<td></td>
</tr>
<tr class="statement">
<td><code class="prettyprint">}
</code></td>
<td></td>
</tr>
</table>
</body>
</html>

最佳答案

通过添加空白解决:nowrap;

关于html - 如何阻止表格自行调整大小以适应屏幕？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14638162/

上一篇：javascript - 仅隐藏 <li> 值而不是其子项

下一篇：html - 为什么投影向左偏移？

相关文章：

html - 为什么我在某些浏览器中的元素上会出现滚动条？

javascript - 在 Canvas 上绘制 3 个圆圈的重叠部分

CSS 文件不使用 webpack 创建

javascript - 表布局固定 - 当位置是绝对的

javascript - 使用jquery滚动页面无法正常工作

asp.net - 将 .less 错误记录到控制台

javascript - 从 jquery ajax 加载导入数据时创建的重复 div 标签

html - thead 不在 IE9 的每一页上打印

html - 如何将面具跨过 table

javascript - Vue.js vue-html5-编辑器

©2024 IT工具网  联系我们