Question

我正在尝试调整第一个单元格的大小。我正在尝试使用max-widh，并将样式放在HTML中并带有宽度，但是我无法调整该单元格的大小。是带有粘性行和列的表

这是de css代码。

div {
  max-width: 40em;
  max-height: 30em;
  overflow: scroll;
  position: relative;
}

table {
  position: relative;
  border-collapse: collapse;
}

td,
th {
  padding: 0.30em;
}

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  color: #000;
  
  
}

thead th:first-child {
  left: 0;
  z-index: 1;
  
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  border-right: 1px solid #CCC;
}

<div>
            <table>
              <thead>
                <tr>
                  <th>head </th>
                  <th>head</th>
                  <th>head</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th>Closer2Nature Shopify UK</th>
                  <td>body</td>
                  <td>body</td>
                </tr>
              </tbody>
            </table>
          </div>

这是带有粘性列和行的表的HTML代码。

Answer 1

我不明白，为什么不只使用width？

thead th:first-child {
  width: 100px;
}

Answer 2

如果我理解正确，这就是您所需要的吗？

#MainDiv {
  overflow-y: scroll;
  position: relative;
  height: 100px;
  width: 310px;
}

table {
  position: relative;
  border-collapse: collapse;
}

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

thead th {
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  top: 0;
  color: #000;
  background-color: gray;
}

thead th:first-child {
  left: 0;
  z-index: 1;
}

tbody th {
  position: -webkit-sticky;
  /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  border-right: 1px solid #CCC;
}

<div id="MainDiv">
  <table>
    <thead>
      <tr>
        <th>head </th>
        <th>head</th>
        <th>head</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Closer2Nature Shopify UK</th>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>Closer2Nature Shopify UK</th>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>Closer2Nature Shopify UK</th>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>Closer2Nature Shopify UK</th>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>Closer2Nature Shopify UK Closer2Nature Shopify UK</th>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>Closer2Nature Shopify UK</th>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>Closer2Nature Shopify UK</th>
        <td>body</td>
        <td>body</td>
      </tr>
    </tbody>
  </table>
</div>

调整表格单元格的大小

2 个答案: