Question

我是关于CSS和HTML的新手，所以如果这看起来像一个愚蠢的问题，请道歉。但是对于上帝的爱，我似乎无法弄明白。我只得到一个水平滚动条，而不是一个垂直滚动条。

在下面的代码中，我尝试实现最后一列，其中包含字符串＆＃39; aaaaaabbb ...＆＃39;变得可滚动。因此，当它过满时会启动一个新行并显示滚动条。所以我想在最后一行看到这个：

期望的结果：

aaaaaaaa
bbbbbbbc
cccccccc

HTML码：

＆＃13;

<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
    background-color: #eee;
}
.td_size {    
  width:100px; 
  height:200px;
  max-width:100px;
  min-width:100px; 
  max-height:200px; 
  min-height:2000px;
  overflow:scroll; 
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>&#43;N/A&#43;</td></tr>
<tr><th>Source</th><td>@Event@</td></tr>
<tr><th>Category</th><td>&amp;Request Fulfillment&amp;</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td</tr>
</table>
</body></html>

＆＃13;

感谢您的帮助。

Answer 1

两件事：

你遗失了＆＃34;＆gt;＆＃34;在结束时</td>。
您只有<tr>中的一列 - 这是故意的吗？（如果不是，您应该colspan=2

<td>

您正在寻找的解决方案是word-wrap: break-word;这将允许内容包装。

我修改了你的代码段：

＆＃13;

<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
    background-color: #eee;
}
.td_size {    
  width:100px; 
  height:200px;
  max-width:100px;
  min-width:100px; 
  max-height:200px; 
  min-height:2000px;
  overflow: auto; /* changed this */
  word-wrap: break-word; /* added this */
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>&#43;N/A&#43;</td></tr>
<tr><th>Source</th><td>@Event@</td></tr>
<tr><th>Category</th><td>&amp;Request Fulfillment&amp;</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size" colspan=2>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td></tr>
</table>
</body></html>

＆＃13;

Answer 2

与其他人提到的一样，为了获得包含长单词的文字，您需要将word-wrap: break-word;添加到td

但是，在表格单元格上实现垂直滚动是有问题的，因为根据定义，表格单元格会扩展以适合所有内容。

您可以通过在该表格单元格上设置display:block来解决此问题。（like this）

但是最好将文本包装在span标记内，以免混淆表元素的显示：

像这样：

FIDDLE

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
}
th {
  text-align: left;
  background-color: #eee;
}
.td_size {
  width: 100px;
  height: 200px;
  max-width: 100px;
  min-width: 100px;
}
.td_size span {
  overflow: auto;
  display: block;
  max-height: 200px;
  word-wrap: break-word;
}

<h2>Ticket details</h2>
<table>
  <tr>
    <th>Requester</th>
    <td>^User^</td>
  </tr>
  <tr>
    <th>Submitted by</th>
    <td>®User®</td>
  </tr>
  <tr>
    <th>Service</th>
    <td>#GLOBAL END USER WORKPLACE#</td>
  </tr>
  <tr>
    <th>CI</th>
    <td>&#43;N/A&#43;</td>
  </tr>
  <tr>
    <th>Source</th>
    <td>@Event@</td>
  </tr>
  <tr>
    <th>Category</th>
    <td>&amp;Request Fulfillment&amp;</td>
  </tr>
  <tr>
    <th>Impact</th>
    <td>!None - No Degradation of Service!</td>
  </tr>
  <tr>
    <th colspan="2" style="text-align:Center">Assignment</th>
  </tr>
  <tr>
    <th>Group</th>
    <td>]Team]</td>
  </tr>
  <tr>
    <th>Staff</th>
    <td>[User[</td>
  </tr>
  <tr>
    <th colspan="2" style="text-align:Center">Description</th>
  </tr>
  <tr>
    <td class="td_size"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</span>
    </td>
  </tr>
</table>

Answer 3

首先，使最后一列超过2，即colspan = 2，但对于css部分，您可以使用overflow-x和overflow-y来确定滚动部分试试吧

Answer 4

您可以使用word-wrap: break-word;或<br>标记来打破单词

CSS使用滚动条固定列宽

4 个答案:

FIDDLE