为滚动条保留的空间截断文本答案

【问题标题】：Space Reserved for Scrollbar Cutting off Text为滚动条保留的空间截断文本
【发布时间】：2021-10-14 02:00:15
【问题描述】：

我遇到了一个奇怪的问题，表格标题被切断（由大约 20 像素的黄色部分表示），因此还有文本：

根据我的调查，这是因为这是为垂直滚动条保留一些空间（尽管它从未出现在标题部分中）。当表格数据足够大以引入滚动条（也占用大约 20px 的宽度）或当我放大页面但就像我说的那样，滚动条只出现在数据部分时，这一点变得很明显：

我正在使用 Razor 语法（自定义帮助程序方法）来创建表，但在我的代码中找不到可能出现此问题的特定屏幕的任何问题。

仅供参考，此问题在多个浏览器中仍然存在（我尝试过 Chrome、Edge 和 IE）

我已经做了一个临时修复，我在最后一个标题列中引入了一个 div，并在它们之间保留了一些空间，以便它是被修剪掉的空白空间而不是文本。但这不是永久的解决方案。

有人可以指导吗？

【问题讨论】：

标签： c# html css asp.net-mvc razor

【解决方案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>

【讨论】：