如何停止調整表格以適應屏幕？

我試圖將寬度設置爲一個特定的值（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>

來源

2013-02-01 user1447343

這就是渲染CSS的代碼，並沒有提到頁面的HTML結構。你應該提供你的HTML和實際的CSS輸出，這將更容易閱讀。理想情況下，您也可以將鏈接粘貼到小提琴或測試頁面。 –

@MikeBrant更新了代碼 – user1447343

可以試試這個在CSS中。

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

來源

2013-02-01 01:22:32 wcraft

我認爲table-layout在代碼的某個地方是固定的... – user1447343

通過添加white-space：nowrap;

來源

2013-02-01 01:41:45 user1447343

如何停止調整表格以適應屏幕？

回答

相關問題