为滚动条保留的空间截断文本
Posted
技术标签:
【中文标题】为滚动条保留的空间截断文本【英文标题】：Space Reserved for Scrollbar Cutting off Text 【发布时间】：2021-10-14 02:00:15 【问题描述】：我遇到了一个奇怪的问题，表格标题被切断（由大约 20 像素的黄色部分表示），因此还有文本：
根据我的调查，这是因为这是为垂直滚动条保留一些空间（尽管它从未出现在标题部分中）。当表格数据足够大以引入滚动条（也占用大约 20px 的宽度）或当我放大页面但就像我说的那样，滚动条只出现在数据部分时，这一点变得很明显：
我正在使用 Razor 语法（自定义帮助程序方法）来创建表，但在我的代码中找不到可能出现此问题的特定屏幕的任何问题。
仅供参考，此问题在多个浏览器中仍然存在（我尝试过 Chrome、Edge 和 IE）
我已经做了一个临时修复，我在最后一个标题列中引入了一个 div，并在它们之间保留了一些空间，以便它是被修剪掉的空白空间而不是文本。但这不是永久的解决方案。
有人可以指导吗？
【问题讨论】：
【参考方案1】：你可以给你的表格赋予css属性“overflow-x:scroll;”这样您就可以滚动查看它而不是被切断。您还可以将填充设置为在表格中的框内的所有内容之间减少空间。您也可以设置表格的宽度和最大宽度属性。我希望这会有所帮助。
<!doctype html>
<html>
<head>
<title> Try It Yourself </title>
<style type="text/css">
table
table-layout: fixed;
width: 110%;
border-collapse: collapse;
font-family: sans-serif;
overflow-x: scroll;
table, th, td
border: 1px solid black;
th, td
padding: 0px;
text-align: center;
/* selects the first th element */
thead th:nth-child(1)
width: 30%;
/* selects the second th element */
thead th:nth-child(2)
width: 30%;
/* selects the third th element */
thead th:nth-child(3)
width: 40%;
</style>
</head>
<body>
<table>
<thead>
<tr>
<th> Heading </th>
<th> Heading </th>
<th> Heading </th>
</tr>
</thead>
<tbody>
<tr>
<td> The overflow will be seen by scrolling</td>
<td> The overflow will be seen by scrolling</td>
<td> The overflow will be seen by scrolling</td>
</tr>
<tr>
<td> The overflow will be seen by scrolling</td>
<td> The overflow will be seen by scrolling</td>
<td> The overflow will be seen by scrolling</td>
</tr>
<tr>
<td> The overflow will be seen by scrolling</td>
<td> The overflow will be seen by scrolling</td>
<td> The overflow will be seen by scrolling</td>
</tr>
</tbody>
</table>
</body>
</html>【讨论】：
以上是关于为滚动条保留的空间截断文本的主要内容，如果未能解决你的问题，请参考以下文章