Question

我尝试将宽度设置为特定值（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>

Answer 1

通过添加white-space解决：nowrap;

Answer 2

可以在CSS中试试。

  table.fixed { table-layout:fixed; }
  table.fixed td { overflow: hidden; }

如何阻止表调整自己以适应屏幕？

2 个答案: