Question

我想实现这样的目标。

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

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

首先尝试这不起作用，即使设置table-layout: fixed也是如此。有可能以某种方式解决这个问题吗？

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

Answer 1

我的评论提示

使用额外的容器并使用负片将其宽度实际上减少为无，但保留在流量中。
为你的td提供填充或宽度。

似乎你只想显示10px宽度的一部分

从左侧选择剪裁

＆＃13;

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;
}

＆＃13;

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

＆＃13;

从右边选择剪裁

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

提供的CSS实际上是第二列，而不是第三列。

＆＃13;

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

＆＃13;

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

＆＃13;

https://jsfiddle.net/u6pvf6wL/

Clip已被弃用，并被clip-path取代。请检查http://caniuse.com/#search=css%20clip-path - 如果你需要支持IE的所有令人愉快的怪癖，你可能不想追求这条道路。 clip-path的语法略有不同。您可以在此处找到示例：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path。

（拥抱新的剪辑路径选项，剪辑仅应用于绝对定位的元素。管理具有绝对定位td的桌子听起来像是一个受伤的世界。虽然我喜欢仅限CSS的解决方案，但这确实是一个小javascript的一个很好的用例。）

是否可以剪辑表格列？

2 个答案: