Half Sticky Table with Html and Css

Question

I have a table like in the picture:

What I am trying to achieve is I want the total part sticky on the table and Math, History and Biology etc. should be able to scroll right. S now the Math is next to the Total but I want History or Biology should be able to next to Total also. Until now my code is like this:

.last-workouts .last-workout-table {
    border-radius: 20px;
}

.last-workouts table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

.last-workouts table .tests:not(:last-child) {
    border-bottom: 1px solid #050a6c;
}

.last-workouts .test {
    background-color: #00bad6;
    text-align: center;
    color: #FFFFFF;
    padding: 1rem 0;
    width: 20%;
}

.last-workouts .test .number-test,
.last-workouts .test .type-test {
    font-weight: bold;
}

.last-workouts .result {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 12%;
    background-color: #F0F0F0;
}

.last-workouts .inner-table {
    border: none;
}

.last-workouts .inner-table tr:not(:last-child) {
    border-bottom: 1px solid #a9a9a9;
}

.last-workouts .total {
    color: #00bad6;
    font-weight: bold;
    padding: .25rem;
}

.last-workouts .inner-table .box td { 
  padding: 0.5rem;
  border: 1px solid #a9a9a9;
}

.last-workouts .inner-table .box .bold { 
    font-weight: bold;
}

.last-workouts .inner-table .box .bold.red {
    color: red;
}

.last-workouts .inner-table .box div {
    padding: .5rem;
}

.last-workouts .lessons {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 12%;
}

.last-workouts .lessons:not(:last-child) {
  border-right: 2px solid #000000;
}

<div class="last-workouts">
  <div style="overflow-x:auto;" class="last-workout-table">
    <table>
      <tr class="tests">
        <td class="test">
          <div class="number-test">TYT-1</div>
          <div class="type-test">Genel Deneme</div>
          <div class="date">30.08.2021</div>
        </td>
        <td class="result">
            <div class="total">
              Toplam
            </div>
            <table class="inner-table">
              <tr class="box">
                <td>S</td>
                <td>D</td>
                <td>Y</td>
                <td>B</td>
                <td class="bold">Net</td>
                <td class="bold">Puan</td>
              </tr>
              <tr class="box">
                <td>115</td>
                <td>80</td>
                <td>6</td>
                <td>16</td>
                <td class="bold red">17.48</td>
                <td class="bold red">490,54</td>
              </tr>
            </table>
        </td>
        <td class="lessons">
          <div class="total">
            Matematik
          </div>
          <table class="inner-table">
            <tr class="box">
              <td>S</td>
              <td>D</td>
              <td>Y</td>
              <td>B</td>
              <td class="bold">Net</td>
              <td class="bold">Puan</td>
            </tr>
            <tr class="box">
              <td>115</td>
              <td>80</td>
              <td>6</td>
              <td>16</td>
              <td class="bold red">17.48</td>
              <td class="bold red">490,54</td>
            </tr>
          </table>
        </td>
        <td class="lessons">
          <div class="total">
            Turkce
          </div>
          <table class="inner-table">
            <tr class="box">
              <td>S</td>
              <td>D</td>
              <td>Y</td>
              <td>B</td>
              <td class="bold">Net</td>
              <td class="bold">Puan</td>
            </tr>
            <tr class="box">
              <td>115</td>
              <td>80</td>
              <td>6</td>
              <td>16</td>
              <td class="bold red">17.48</td>
              <td class="bold red">490,54</td>
            </tr>
          </table>
        </td>
        <td class="lessons">
          <div class="total">
            Tarih
          </div>
          <table class="inner-table">
            <tr class="box">
              <td>S</td>
              <td>D</td>
              <td>Y</td>
              <td>B</td>
              <td class="bold">Net</td>
              <td class="bold">Puan</td>
            </tr>
            <tr class="box">
              <td>115</td>
              <td>80</td>
              <td>6</td>
              <td>16</td>
              <td class="bold red">17.48</td>
              <td class="bold red">490,54</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</div>

So how do you think I can achieve this? Thanks

I forgot to search for it before answering, this question is [possibly a duplicate](https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b), the other question has solutions that are similar to mine. — Gunther, Aug 30 '21 at 13:59

score 3 · Accepted Answer · answered Aug 30 '21 at 13:54

Nest .test and .result in an inner table and add position: sticky; left: 0; to the outer td.

.last-workouts .last-workout-table {
  border-radius: 20px;
}

.last-workouts table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

.last-workouts table .tests:not(:last-child) {
  border-bottom: 1px solid #050a6c;
}

.last-workouts .test {
  background-color: #00bad6;
  text-align: center;
  color: #FFFFFF;
  padding: 1rem 0;
  width: 20%;
}

.last-workouts .test .number-test,
.last-workouts .test .type-test {
  font-weight: bold;
}

.last-workouts .result {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 12%;
  background-color: #F0F0F0;
}

.last-workouts .inner-table {
  border: none;
}

.last-workouts .inner-table tr:not(:last-child) {
  border-bottom: 1px solid #a9a9a9;
}

.last-workouts .total {
  color: #00bad6;
  font-weight: bold;
  padding: .25rem;
}

.last-workouts .inner-table .box td {
  padding: 0.5rem;
  border: 1px solid #a9a9a9;
}

.last-workouts .inner-table .box .bold {
  font-weight: bold;
}

.last-workouts .inner-table .box .bold.red {
  color: red;
}

.last-workouts .inner-table .box div {
  padding: .5rem;
}

.last-workouts .lessons {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 12%;
}

.last-workouts .lessons:not(:last-child) {
  border-right: 2px solid #000000;
}

<div class="last-workouts">
  <div style="overflow-x:auto;" class="last-workout-table">
    <table>
      <tr class="tests">
        <td style="position: sticky; left: 0;">
          <table>
            <td class="test">
              <div class="number-test">TYT-1</div>
              <div class="type-test">Genel Deneme</div>
              <div class="date">30.08.2021</div>
            </td>
            <td class="result">
              <div class="total">
                Toplam
              </div>
              <table class="inner-table">
                <tr class="box">
                  <td>S</td>
                  <td>D</td>
                  <td>Y</td>
                  <td>B</td>
                  <td class="bold">Net</td>
                  <td class="bold">Puan</td>
                </tr>
                <tr class="box">
                  <td>115</td>
                  <td>80</td>
                  <td>6</td>
                  <td>16</td>
                  <td class="bold red">17.48</td>
                  <td class="bold red">490,54</td>
                </tr>
              </table>
            </td>
          </table>
        </td>
        <td class="lessons">
          <div class="total">
            Matematik
          </div>
          <table class="inner-table">
            <tr class="box">
              <td>S</td>
              <td>D</td>
              <td>Y</td>
              <td>B</td>
              <td class="bold">Net</td>
              <td class="bold">Puan</td>
            </tr>
            <tr class="box">
              <td>115</td>
              <td>80</td>
              <td>6</td>
              <td>16</td>
              <td class="bold red">17.48</td>
              <td class="bold red">490,54</td>
            </tr>
          </table>
        </td>
        <td class="lessons">
          <div class="total">
            Turkce
          </div>
          <table class="inner-table">
            <tr class="box">
              <td>S</td>
              <td>D</td>
              <td>Y</td>
              <td>B</td>
              <td class="bold">Net</td>
              <td class="bold">Puan</td>
            </tr>
            <tr class="box">
              <td>115</td>
              <td>80</td>
              <td>6</td>
              <td>16</td>
              <td class="bold red">17.48</td>
              <td class="bold red">490,54</td>
            </tr>
          </table>
        </td>
        <td class="lessons">
          <div class="total">
            Tarih
          </div>
          <table class="inner-table">
            <tr class="box">
              <td>S</td>
              <td>D</td>
              <td>Y</td>
              <td>B</td>
              <td class="bold">Net</td>
              <td class="bold">Puan</td>
            </tr>
            <tr class="box">
              <td>115</td>
              <td>80</td>
              <td>6</td>
              <td>16</td>
              <td class="bold red">17.48</td>
              <td class="bold red">490,54</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</div>

Half Sticky Table with Html and Css

1 Answers1