通过CSS样式锁定Table的首行首列

您可以通过CSS样式中的伪类选择器 `:first-child` 和 `:nth-child()` 来锁定表格的首行和首列。下面是一个简单的例子：

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid black;
  padding: 5px;
}

/* 锁定表格第一行 */
tr:first-child {
  font-weight: bold;
}

/* 锁定表格第一列 */
td:first-child,
th:first-child {
  font-weight: bold;
  background-color: lightgray;
}

/* 锁定表格第一行第一列 */
td:first-child,
th:first-child,
tr:first-child td:first-child,
tr:first-child th:first-child {
  background-color: gray;
  color: white;
}

此代码将为表格的第一行和第一列设置加粗的字体，并在第一列上设置灰色背景色。如果您想要锁定表格的第一行和第一列，可以通过组合选择器 `tr:first-child td:first-child` 和 `tr:first-child th:first-child` 来实现。

相关问题

css table列拖动

CSS表格列拖动是指通过CSS样式和JavaScript来实现表格列的拖动调整大小的功能。

实现这个功能需要使用一些CSS和JavaScript代码。首先，为表格添加一个类名，比如"resizable-table"。然后，使用CSS选择器选择这个类名，并设置表格的"table-layout"属性为"fixed"，这样表格的宽度将固定不变。

接下来，需要添加一些JavaScript代码来实现列拖动的功能。首先，在JavaScript中选择所有具有"resizable-table"类名的表格。然后，为每个表格添加一个"mousedown"事件监听器，用来监听当用户按下鼠标左键时的事件。

在事件监听器中，需要获取鼠标按下时的坐标和列的宽度。然后，添加一个"mousemove"事件监听器，用来监听用户移动鼠标的事件。

在"mousemove"事件监听器中，需要计算鼠标移动的距离，并根据距离调整列的宽度。同时，还要实时更新鼠标样式，以提供可视化的反馈。

最后，当用户释放鼠标左键时，需要移除所有事件监听器，表示拖动操作结束。

通过上述步骤，就可以实现CSS表格列的拖动功能。这样，用户就可以通过拖动列边缘来调整表格列的宽度，从而更好地适应页面布局和显示需求。

需要注意的是，CSS表格列拖动功能在不同浏览器上的兼容性可能不同。因此，在编写代码时，需要考虑不同浏览器和版本的特性和限制，以确保功能在各种环境中正常运行。

css给table每一列设置不同宽度

可以使用CSS中的`:nth-child()`选择器来为table的每一列设置不同的宽度，具体代码如下：

table tr td:nth-child(1) {
  width: 100px;
}

table tr td:nth-child(2) {
  width: 200px;
}

table tr td:nth-child(3) {
  width: 50px;
}

这段代码将会为table中的第一列设置宽度为100px，第二列设置宽度为200px，第三列设置宽度为50px。你可以根据自己的需要来设置每一列的宽度。