Question

我正在制作如下所示的表格。问题是，当单元格的内容超过时，行长度会变化。就像你可以看到第9行和第10行的区别。所有行的宽度必须相同。我不能给出固定的宽度柱。因为我不知道实际排的长度是多少。

我还在使用水平和垂直滚动。 JSFiddle link

.container {
    overflow-x: auto;
    max-height: 396px;
}

table, th, td {
    border: 1px solid black;
    white-space: nowrap;
    padding-left: 5px;
    /* table-layout: fixed; */
    /* width: 100%; */
    font-weight: normal;
    padding-right: 5px;
}

<div class="container" id="main_btl_container" style="width: 500px;position: relative;padding: 0px;border: 1px solid black;"><div style="opacity: 0; top: 0px; left: 0px; width: 1px; height: 166650px;"></div><table><tr class="vrow" style="position: absolute; top: 0px;"><td>row 0  : col0</td><td>row 0  : col1</td><td>row 0  : col2</td><td>row 0  : col3</td><td>row 0  : col4</td><td>row 0  : col5</td><td>row 0  : col6</td><td>row 0  : col7</td><td>row 0  : col8</td><td>row 0  : col9</td><td>row 0  : col10</td><td>row 0  : col11</td><td>row 0  : col12</td><td>row 0  : col13</td><td>row 0  : col14</td></tr><tr class="vrow" style="position: absolute; top: 30px;"><td>row 1  : col0</td><td>row 1  : col1</td><td>row 1  : col2</td><td>row 1  : col3</td><td>row 1  : col4</td><td>row 1  : col5</td><td>row 1  : col6</td><td>row 1  : col7</td><td>row 1  : col8</td><td>row 1  : col9</td><td>row 1  : col10</td><td>row 1  : col11</td><td>row 1  : col12</td><td>row 1  : col13</td><td>row 1  : col14</td></tr><tr class="vrow" style="position: absolute; top: 60px;"><td>row 2  : col0</td><td>row 2  : col1</td><td>row 2  : col2</td><td>row 2  : col3</td><td>row 2  : col4</td><td>row 2  : col5</td><td>row 2  : col6</td><td>row 2  : col7</td><td>row 2  : col8</td><td>row 2  : col9</td><td>row 2  : col10</td><td>row 2  : col11</td><td>row 2  : col12</td><td>row 2  : col13</td><td>row 2  : col14</td></tr><tr class="vrow" style="position: absolute; top: 90px;"><td>row 3  : col0</td><td>row 3  : col1</td><td>row 3  : col2</td><td>row 3  : col3</td><td>row 3  : col4</td><td>row 3  : col5</td><td>row 3  : col6</td><td>row 3  : col7</td><td>row 3  : col8</td><td>row 3  : col9</td><td>row 3  : col10</td><td>row 3  : col11</td><td>row 3  : col12</td><td>row 3  : col13</td><td>row 3  : col14</td></tr><tr class="vrow" style="position: absolute; top: 120px;"><td>row 4  : col0</td><td>row 4  : col1</td><td>row 4  : col2</td><td>row 4  : col3</td><td>row 4  : col4</td><td>row 4  : col5</td><td>row 4  : col6</td><td>row 4  : col7</td><td>row 4  : col8</td><td>row 4  : col9</td><td>row 4  : col10</td><td>row 4  : col11</td><td>row 4  : col12</td><td>row 4  : col13</td><td>row 4  : col14</td></tr><tr class="vrow" style="position: absolute; top: 150px;"><td>row 5  : col0</td><td>row 5  : col1</td><td>row 5  : col2</td><td>row 5  : col3</td><td>row 5  : col4</td><td>row 5  : col5</td><td>row 5  : col6</td><td>row 5  : col7</td><td>row 5  : col8</td><td>row 5  : col9</td><td>row 5  : col10</td><td>row 5  : col11</td><td>row 5  : col12</td><td>row 5  : col13</td><td>row 5  : col14</td></tr><tr class="vrow" style="position: absolute; top: 180px;"><td>row 6  : col0</td><td>row 6  : col1</td><td>row 6  : col2</td><td>row 6  : col3</td><td>row 6  : col4</td><td>row 6  : col5</td><td>row 6  : col6</td><td>row 6  : col7</td><td>row 6  : col8</td><td>row 6  : col9</td><td>row 6  : col10</td><td>row 6  : col11</td><td>row 6  : col12</td><td>row 6  : col13</td><td>row 6  : col14</td></tr><tr class="vrow" style="position: absolute; top: 210px;"><td>row 7  : col0</td><td>row 7  : col1</td><td>row 7  : col2</td><td>row 7  : col3</td><td>row 7  : col4</td><td>row 7  : col5</td><td>row 7  : col6</td><td>row 7  : col7</td><td>row 7  : col8</td><td>row 7  : col9</td><td>row 7  : col10</td><td>row 7  : col11</td><td>row 7  : col12</td><td>row 7  : col13</td><td>row 7  : col14</td></tr><tr class="vrow" style="position: absolute; top: 240px;"><td>row 8  : col0</td><td>row 8  : col1</td><td>row 8  : col2</td><td>row 8  : col3</td><td>row 8  : col4</td><td>row 8  : col5</td><td>row 8  : col6</td><td>row 8  : col7</td><td>row 8  : col8</td><td>row 8  : col9</td><td>row 8  : col10</td><td>row 8  : col11</td><td>row 8  : col12</td><td>row 8  : col13</td><td>row 8  : col14</td></tr><tr class="vrow" style="position: absolute; top: 270px;"><td>row 9  : col0</td><td>row 9  : col1</td><td>row 9  : col2</td><td>row 9  : col3</td><td>row 9  : col4</td><td>row 9  : col5</td><td>row 9  : col6</td><td>row 9  : col7</td><td>row 9  : col8</td><td>row 9  : col9</td><td>row 9  : col10</td><td>row 9  : col11</td><td>row 9  : col12</td><td>row 9  : col13</td><td>row 9  : col14</td></tr><tr class="vrow" style="position: absolute; top: 300px;"><td>row 10  : col0</td><td>row 10  : col1</td><td>row 10  : col2</td><td>row 10  : col3</td><td>row 10  : col4</td><td>row 10  : col5</td><td>row 10  : col6</td><td>row 10  : col7</td><td>row 10  : col8</td><td>row 10  : col9</td><td>row 10  : col10</td><td>row 10  : col11</td><td>row 10  : col12</td><td>row 10  : col13</td><td>row 10  : col14</td></tr><tr class="vrow" style="position: absolute; top: 330px;"><td>row 11  : col0</td><td>row 11  : col1</td><td>row 11  : col2</td><td>row 11  : col3</td><td>row 11  : col4</td><td>row 11  : col5</td><td>row 11  : col6</td><td>row 11  : col7</td><td>row 11  : col8</td><td>row 11  : col9</td><td>row 11  : col10</td><td>row 11  : col11</td><td>row 11  : col12</td><td>row 11  : col13</td><td>row 11  : col14</td></tr><tr class="vrow" style="position: absolute; top: 360px;"><td>row 12  : col0</td><td>row 12  : col1</td><td>row 12  : col2</td><td>row 12  : col3</td><td>row 12  : col4</td><td>row 12  : col5</td><td>row 12  : col6</td><td>row 12  : col7</td><td>row 12  : col8</td><td>row 12  : col9</td><td>row 12  : col10</td><td>row 12  : col11</td><td>row 12  : col12</td><td>row 12  : col13</td><td>row 12  : col14</td></tr><tr class="vrow" style="position: absolute; top: 390px;"><td>row 13  : col0</td><td>row 13  : col1</td><td>row 13  : col2</td><td>row 13  : col3</td><td>row 13  : col4</td><td>row 13  : col5</td><td>row 13  : col6</td><td>row 13  : col7</td><td>row 13  : col8</td><td>row 13  : col9</td><td>row 13  : col10</td><td>row 13  : col11</td><td>row 13  : col12</td><td>row 13  : col13</td><td>row 13  : col14</td></tr><tr class="vrow" style="position: absolute; top: 420px;"><td>row 14  : col0</td><td>row 14  : col1</td><td>row 14  : col2</td><td>row 14  : col3</td><td>row 14  : col4</td><td>row 14  : col5</td><td>row 14  : col6</td><td>row 14  : col7</td><td>row 14  : col8</td><td>row 14  : col9</td><td>row 14  : col10</td><td>row 14  : col11</td><td>row 14  : col12</td><td>row 14  : col13</td><td>row 14  : col14</td></tr><tr class="vrow" style="position: absolute; top: 450px;"><td>row 15  : col0</td><td>row 15  : col1</td><td>row 15  : col2</td><td>row 15  : col3</td><td>row 15  : col4</td><td>row 15  : col5</td><td>row 15  : col6</td><td>row 15  : col7</td><td>row 15  : col8</td><td>row 15  : col9</td><td>row 15  : col10</td><td>row 15  : col11</td><td>row 15  : col12</td><td>row 15  : col13</td><td>row 15  : col14</td></tr><tr class="vrow" style="position: absolute; top: 480px;"><td>row 16  : col0</td><td>row 16  : col1</td><td>row 16  : col2</td><td>row 16  : col3</td><td>row 16  : col4</td><td>row 16  : col5</td><td>row 16  : col6</td><td>row 16  : col7</td><td>row 16  : col8</td><td>row 16  : col9</td><td>row 16  : col10</td><td>row 16  : col11</td><td>row 16  : col12</td><td>row 16  : col13</td><td>row 16  : col14</td></tr><tr class="vrow" style="position: absolute; top: 510px;"><td>row 17  : col0</td><td>row 17  : col1</td><td>row 17  : col2</td><td>row 17  : col3</td><td>row 17  : col4</td><td>row 17  : col5</td><td>row 17  : col6</td><td>row 17  : col7</td><td>row 17  : col8</td><td>row 17  : col9</td><td>row 17  : col10</td><td>row 17  : col11</td><td>row 17  : col12</td><td>row 17  : col13</td><td>row 17  : col14</td></tr><tr class="vrow" style="position: absolute; top: 540px;"><td>row 18  : col0</td><td>row 18  : col1</td><td>row 18  : col2</td><td>row 18  : col3</td><td>row 18  : col4</td><td>row 18  : col5</td><td>row 18  : col6</td><td>row 18  : col7</td><td>row 18  : col8</td><td>row 18  : col9</td><td>row 18  : col10</td><td>row 18  : col11</td><td>row 18  : col12</td><td>row 18  : col13</td><td>row 18  : col14</td></tr><tr class="vrow" style="position: absolute; top: 570px;"><td>row 19  : col0</td><td>row 19  : col1</td><td>row 19  : col2</td><td>row 19  : col3</td><td>row 19  : col4</td><td>row 19  : col5</td><td>row 19  : col6</td><td>row 19  : col7</td><td>row 19  : col8</td><td>row 19  : col9</td><td>row 19  : col10</td><td>row 19  : col11</td><td>row 19  : col12</td><td>row 19  : col13</td><td>row 19  : col14</td></tr><tr class="vrow" style="position: absolute; top: 600px;"><td>row 20  : col0</td><td>row 20  : col1</td><td>row 20  : col2</td><td>row 20  : col3</td><td>row 20  : col4</td><td>row 20  : col5</td><td>row 20  : col6</td><td>row 20  : col7</td><td>row 20  : col8</td><td>row 20  : col9</td><td>row 20  : col10</td><td>row 20  : col11</td><td>row 20  : col12</td><td>row 20  : col13</td><td>row 20  : col14</td></tr><tr class="vrow" style="position: absolute; top: 630px;"><td>row 21  : col0</td><td>row 21  : col1</td><td>row 21  : col2</td><td>row 21  : col3</td><td>row 21  : col4</td><td>row 21  : col5</td><td>row 21  : col6</td><td>row 21  : col7</td><td>row 21  : col8</td><td>row 21  : col9</td><td>row 21  : col10</td><td>row 21  : col11</td><td>row 21  : col12</td><td>row 21  : col13</td><td>row 21  : col14</td></tr><tr class="vrow" style="position: absolute; top: 660px;"><td>row 22  : col0</td><td>row 22  : col1</td><td>row 22  : col2</td><td>row 22  : col3</td><td>row 22  : col4</td><td>row 22  : col5</td><td>row 22  : col6</td><td>row 22  : col7</td><td>row 22  : col8</td><td>row 22  : col9</td><td>row 22  : col10</td><td>row 22  : col11</td><td>row 22  : col12</td><td>row 22  : col13</td><td>row 22  : col14</td></tr><tr class="vrow" style="position: absolute; top: 690px;"><td>row 23  : col0</td><td>row 23  : col1</td><td>row 23  : col2</td><td>row 23  : col3</td><td>row 23  : col4</td><td>row 23  : col5</td><td>row 23  : col6</td><td>row 23  : col7</td><td>row 23  : col8</td><td>row 23  : col9</td><td>row 23  : col10</td><td>row 23  : col11</td><td>row 23  : col12</td><td>row 23  : col13</td><td>row 23  : col14</td></tr><tr class="vrow" style="position: absolute; top: 720px;"><td>row 24  : col0</td><td>row 24  : col1</td><td>row 24  : col2</td><td>row 24  : col3</td><td>row 24  : col4</td><td>row 24  : col5</td><td>row 24  : col6</td><td>row 24  : col7</td><td>row 24  : col8</td><td>row 24  : col9</td><td>row 24  : col10</td><td>row 24  : col11</td><td>row 24  : col12</td><td>row 24  : col13</td><td>row 24  : col14</td></tr><tr class="vrow" style="position: absolute; top: 750px;"><td>row 25  : col0</td><td>row 25  : col1</td><td>row 25  : col2</td><td>row 25  : col3</td><td>row 25  : col4</td><td>row 25  : col5</td><td>row 25  : col6</td><td>row 25  : col7</td><td>row 25  : col8</td><td>row 25  : col9</td><td>row 25  : col10</td><td>row 25  : col11</td><td>row 25  : col12</td><td>row 25  : col13</td><td>row 25  : col14</td></tr><tr class="vrow" style="position: absolute; top: 780px;"><td>row 26  : col0</td><td>row 26  : col1</td><td>row 26  : col2</td><td>row 26  : col3</td><td>row 26  : col4</td><td>row 26  : col5</td><td>row 26  : col6</td><td>row 26  : col7</td><td>row 26  : col8</td><td>row 26  : col9</td><td>row 26  : col10</td><td>row 26  : col11</td><td>row 26  : col12</td><td>row 26  : col13</td><td>row 26  : col14</td></tr><tr class="vrow" style="position: absolute; top: 810px;"><td>row 27  : col0</td><td>row 27  : col1</td><td>row 27  : col2</td><td>row 27  : col3</td><td>row 27  : col4</td><td>row 27  : col5</td><td>row 27  : col6</td><td>row 27  : col7</td><td>row 27  : col8</td><td>row 27  : col9</td><td>row 27  : col10</td><td>row 27  : col11</td><td>row 27  : col12</td><td>row 27  : col13</td><td>row 27  : col14</td></tr><tr class="vrow" style="position: absolute; top: 840px;"><td>row 28  : col0</td><td>row 28  : col1</td><td>row 28  : col2</td><td>row 28  : col3</td><td>row 28  : col4</td><td>row 28  : col5</td><td>row 28  : col6</td><td>row 28  : col7</td><td>row 28  : col8</td><td>row 28  : col9</td><td>row 28  : col10</td><td>row 28  : col11</td><td>row 28  : col12</td><td>row 28  : col13</td><td>row 28  : col14</td></tr><tr class="vrow" style="position: absolute; top: 870px;"><td>row 29  : col0</td><td>row 29  : col1</td><td>row 29  : col2</td><td>row 29  : col3</td><td>row 29  : col4</td><td>row 29  : col5</td><td>row 29  : col6</td><td>row 29  : col7</td><td>row 29  : col8</td><td>row 29  : col9</td><td>row 29  : col10</td><td>row 29  : col11</td><td>row 29  : col12</td><td>row 29  : col13</td><td>row 29  : col14</td></tr><tr class="vrow" style="position: absolute; top: 900px;"><td>row 30  : col0</td><td>row 30  : col1</td><td>row 30  : col2</td><td>row 30  : col3</td><td>row 30  : col4</td><td>row 30  : col5</td><td>row 30  : col6</td><td>row 30  : col7</td><td>row 30  : col8</td><td>row 30  : col9</td><td>row 30  : col10</td><td>row 30  : col11</td><td>row 30  : col12</td><td>row 30  : col13</td><td>row 30  : col14</td></tr><tr class="vrow" style="position: absolute; top: 930px;"><td>row 31  : col0</td><td>row 31  : col1</td><td>row 31  : col2</td><td>row 31  : col3</td><td>row 31  : col4</td><td>row 31  : col5</td><td>row 31  : col6</td><td>row 31  : col7</td><td>row 31  : col8</td><td>row 31  : col9</td><td>row 31  : col10</td><td>row 31  : col11</td><td>row 31  : col12</td><td>row 31  : col13</td><td>row 31  : col14</td></tr><tr class="vrow" style="position: absolute; top: 960px;"><td>row 32  : col0</td><td>row 32  : col1</td><td>row 32  : col2</td><td>row 32  : col3</td><td>row 32  : col4</td><td>row 32  : col5</td><td>row 32  : col6</td><td>row 32  : col7</td><td>row 32  : col8</td><td>row 32  : col9</td><td>row 32  : col10</td><td>row 32  : col11</td><td>row 32  : col12</td><td>row 32  : col13</td><td>row 32  : col14</td></tr><tr class="vrow" style="position: absolute; top: 990px;"><td>row 33  : col0</td><td>row 33  : col1</td><td>row 33  : col2</td><td>row 33  : col3</td><td>row 33  : col4</td><td>row 33  : col5</td><td>row 33  : col6</td><td>row 33  : col7</td><td>row 33  : col8</td><td>row 33  : col9</td><td>row 33  : col10</td><td>row 33  : col11</td><td>row 33  : col12</td><td>row 33  : col13</td><td>row 33  : col14</td></tr><tr class="vrow" style="position: absolute; top: 1020px;"><td>row 34  : col0</td><td>row 34  : col1</td><td>row 34  : col2</td><td>row 34  : col3</td><td>row 34  : col4</td><td>row 34  : col5</td><td>row 34  : col6</td><td>row 34  : col7</td><td>row 34  : col8</td><td>row 34  : col9</td><td>row 34  : col10</td><td>row 34  : col11</td><td>row 34  : col12</td><td>row 34  : col13</td><td>row 34  : col14</td></tr><tr class="vrow" style="position: absolute; top: 1050px;"><td>row 35  : col0</td><td>row 35  : col1</td><td>row 35  : col2</td><td>row 35  : col3</td><td>row 35  : col4</td><td>row 35  : col5</td><td>row 35  : col6</td><td>row 35  : col7</td><td>row 35  : col8</td><td>row 35  : col9</td><td>row 35  : col10</td><td>row 35  : col11</td><td>row 35  : col12</td><td>row 35  : col13</td><td>row 35  : col14</td></tr><tr class="vrow" style="position: absolute; top: 1080px;"><td>row 36  : col0</td><td>row 36  : col1</td><td>row 36  : col2</td><td>row 36  : col3</td><td>row 36  : col4</td><td>row 36  : col5</td><td>row 36  : col6</td><td>row 36  : col7</td><td>row 36  : col8</td><td>row 36  : col9</td><td>row 36  : col10</td><td>row 36  : col11</td><td>row 36  : col12</td><td>row 36  : col13</td><td>row 36  : col14</td></tr><tr class="vrow" style="position: absolute; top: 1110px;"><td>row 37  : col0</td><td>row 37  : col1</td><td>row 37  : col2</td><td>row 37  : col3</td><td>row 37  : col4</td><td>row 37  : col5</td><td>row 37  : col6</td><td>row 37  : col7</td><td>row 37  : col8</td><td>row 37  : col9</td><td>row 37  : col10</td><td>row 37  : col11</td><td>row 37  : col12</td><td>row 37  : col13</td><td>row 37  : col14</td></tr><tr class="vrow" style="position: absolute; top: 1140px;"><td>row 38  : col0</td><td>row 38  : col1</td><td>row 38  : col2</td><td>row 38  : col3</td><td>row 38  : col4</td><td>row 38  : col5</td><td>row 38  : col6</td><td>row 38  : col7</td><td>row 38  : col8</td><td>row 38  : col9</td><td>row 38  : col10</td><td>row 38  : col11</td><td>row 38  : col12</td><td>row 38  : col13</td><td>row 38  : col14</td></tr></table></div>

非常感谢任何帮助。提前致谢。

Answer 1

使用max-width，

 table, th, td {
     white-space: pre-line;
     max-width: 200px; //use whatever you want
     overflow-x: hidden;
     word-wrap: break-word;
    }

Answer 2

为什么在每一行（position: absolute;）上使用<tr>，为什么为容器类设置了height: 166650px;？

尽量省略它，它会很好。但是，您可能还想调整其他样式。简单应该是关键。

JSFiddle Demo

Answer 3

更改

删除所有position属性。
将巨大的16k div移到桌子下面。
将所有<td>高度26.8像素计算为大约30像素。
制作.container的尺寸min-width: 500px和min-height: 398px。如果它是一个容器，为什么它需要限制自己的内容（即表）的长度？

表组件上有absolute和relative通常是对表的妨碍，因为表的组件位置已经或多或少地确定了。在absolute上强加<tr>很可能会破坏表格（正如我们在问题示例中看到的那样）。

FIDDLE

Html表行宽度因内容而异

3 个答案:

更改