半粘 Table 与 Html 和 Css

Question

我有一个table像图中这样的：

我想要实现的是我希望整个部分粘在 table 上，数学、历史和生物学等应该能够向右滚动。现在数学在总计旁边，但我希望历史或生物学也应该能够在总计旁边。到目前为止，我的代码是这样的：

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

那么你认为我如何才能做到这一点？谢谢

Answer 1

将 .test 和 .result 嵌套在内部 table 中，并将 position: sticky; left: 0; 添加到外部 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>

半粘 Table 与 Html 和 Css

Half Sticky Table with Html and Css

html

css

html-table