CSS 用滚动条固定列宽

Question

我是 CSS 和 HTML 方面的新手，如果这看起来是个愚蠢的问题，我深表歉意。但是看在上帝的份上，我似乎无法弄清楚。我只有水平滚动条，没有垂直滚动条。

在下面的代码中，我尝试实现包含字符串 'aaaaaabbb...' 的最后一列变为可滚动。因此，当它溢出时，它会开始一个新行并显示一个滚动条。所以我想在最后一行看到这个：

想要的结果：

aaaaaaaa
bbbbbbbc
cccccccc

HTML-代码:

<!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>

感谢您的帮助。

Answer 1

两件事：

您的结尾缺少一个“>”</td>。
你只有一栏 <tr> - 这是故意的吗？（如果不是，你应该在那个 <td>

colspan=2

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

我修改了您的代码段：

<!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>

Answer 2

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

Answer 3

您可以在要打断单词的地方使用 word-wrap: break-word; 或 <br> 标签

Answer 4

就像其他人提到的那样，为了让长的单字文本换行 - 您需要添加：word-wrap: break-word; 到 td

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

您可以通过在 table 单元格上设置 display:block 来解决这个问题。 (like this)

但最好将文本包裹在 span 标签内，以免弄乱 table 元素的显示：

像这样：

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>

CSS 用滚动条固定列宽

CSS Fixed column width with scroll bar

html

css

html-table

FIDDLE