html - 是否可以剪辑表格列？

Question

我想实现这样的目标。

table > tbody > tr > td:nth-child(2) {
  clip: rect(0px, 10px, 100px, 0px);
}

“隐藏”表格第三列的第一个 10px 是必要的。

起初尝试这不起作用，即使设置了 table-layout: fixed。有没有可能以某种方式解决这个问题？

我想尝试使用这种技术来实现具有“虚拟”水平滚动的固定列。

Answer 1

我的评论提示

• 使用额外的容器并使用 negative 将其宽度几乎减小到零，但保持在流中。
• 为您的 td 提供填充或宽度。

看来你只想显示 10px 宽度的一部分

从左边选择裁剪的方法

table > tbody > tr > td:nth-child(2) div {
  margin: 0 -999px 0 -10px;
  /* here -10px brings element in padding area of td and shows the first 10 px , to clip at 10px instead 0px do -20px idem for top margin */
  max-height: 100%;/* eventually & overflow:hidden ? */
  color:white
}
table > tbody > tr > td:nth-child(2) {
  padding-left: 10px;
  background: purple;
  overflow: hidden;
}
table > tbody > tr > td {
  background-color: orange;
}
/* example new clipping coordonates */
table + table > tbody > tr > td:nth-child(2) div {
  margin: -0.2em -999px 0 -3.75em;
}

<table>
  <tbody>
    <tr>
      <td>First Column</td>
      <td>
        <div>Second Column</div>
      </td>
      <td>Third Column</td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td>First Column</td>
      <td>
        <div>Second Column</div>
      </td>
      <td>Third Column</td>
    </tr>
  </tbody>
</table>

从右边选择裁剪的方法

table > tbody > tr > td:nth-child(2) div {
  float: right;
  margin: 0 0 0 -9999px;
  color: white
}
table > tbody > tr > td:nth-child(2) {
  padding-left: 10px;
  background: purple;
  overflow: hidden;
}
table > tbody > tr > td {
  background-color: orange;
}
/* example new clipping coordonates */

table + table > tbody > tr > td:nth-child(2) div {
  margin: 0 -20px 0 -9999px;
}

<table>
  <tbody>
    <tr>
      <td>First Column</td>
      <td>
        <div>Second Column</div>
      </td>
      <td>Third Column</td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td>First Column</td>
      <td>
        <div>Second Column</div>
      </td>
      <td>Third Column</td>
    </tr>
  </tbody>
</table>