调整表格单元格的大小答案

【问题标题】：Resize a table cell调整表格单元格的大小
【发布时间】：2020-03-23 22:04:09
【问题描述】：

我正在尝试调整第一个单元格的大小。我正在尝试使用 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 代码。

【问题讨论】：

能否也分享一下HTML代码
当然，伙计。
你得到了答案还是还在寻找？

标签： html css sass

【解决方案1】：

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

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

【讨论】：

我试过宽度，但它对我不起作用。我也尝试过不同类型的测量。
这在我的代码中不起作用。这一定是另一个问题。谢谢

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

【讨论】：

如果是这样，但我需要修改第一列的宽度。我不能
你想怎么修改宽度？是动态的还是使用css的？