Изменить размер ячейки таблицы

Question

Я пытаюсь изменить размер первой ячейки. Я пытаюсь с max-widh и помещаю стиль в HTML и с шириной, но я не могу изменить размер этой ячейки. Таблица с липкой строкой и col

Это код де 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

Если я правильно понял, это то, что вам нужно?

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

Answer 2

Не понимаю, почему бы не использовать только width?

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