Shopify Question posted in
The Shopify help center can be found here.

Resize a table cell – Shopify

I’m trying to resize the first cell. I’m trying with max-widh, and put the style in the HTML and with width, but I can’t resize that cell.
Is a table with sticky row and col

This is de css code. 

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>

This is the HTML code for the table with a sticky col and row.

Tags:

2

Answers


  1. 0

    I don’t understand, why not use only width?

    thead th:first-child {
  width: 100px;
}
    Login or Signup to reply.
  2. 0

    If I understood correctly this is what you need?

    #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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search