Create Html Table Specific Partial Scrolls

I'm trying to make a table

I'm trying to scroll through certain parts, but if you look at the image,

I want to implement it so that only the red square can be moved left and right scrolls.

I would appreciate it if you could tell me an example or site for reference.

html5 css3

2022-09-22 15:19

1 Answers

You can try the following:

I think it would be helpful to understand if you check the demo and code below.

DEMO PREVIEW 〉

html

<table class="table--outter">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
      <td>1-4</td>
      <td>1-5</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
      <td colspan="3" rowspan="4" class="td-2-3">
        <div class="wapper">
          <table class="table--inner">
            <tbody>
              <tr>
                <td>a-a</td>
                <td>a-b</td>
                <td>a-c</td>
                <td>a-d</td>
              </tr>
              <tr>
                <td>b-a</td>
                <td>b-b</td>
                <td>b-c</td>
                <td>b-d</td>
              </tr>
              <tr>
                <td>c-a</td>
                <td>c-b</td>
                <td>c-c</td>
                <td>c-d</td>
              </tr>
              <tr>
                <td>d-a</td>
                <td>d-b</td>
                <td>d-c</td>
                <td>d-d</td>
              </tr>
              <tr>
                <td>e-a</td>
                <td>e-b</td>
                <td>e-c</td>
                <td>e-d</td>
              </tr>
            </tbody>
          </table>

        </div>
      </td>
    </tr>
    <tr>
      <td>3-1</td>
      <td>3-1</td>
    </tr>
    <tr>
      <td>4-1</td>
      <td>4-2</td>
    </tr>
    <tr>
      <td>5-1</td>
      <td>5-2</td>
    </tr>
  </tbody>
</table>

css

table {
  table-layout: fixed;
  border-collapse: collapse;
}

table th, 
table td {
  padding: 16px;
  max-width: 40px;
  min-width: 40px;
  text-align: center;
  background-color: blanchedalmond;
}

.table--outter > thead > tr > th, 
.table--outter > tbody > tr > td {
  border: 1px solid black;
}

.td-2-3 { 
  padding: 0; 
}

.wapper {
  overflow: scroll;
  height: 207px;
}

.table--inner td {
  border-top: 1px solid black;
  border-left: 1px solid black;
  background-color: orange;
}

.table--inner tr:first-child td {
  border-top: none;
}

.table--inner tr td:first-child {
  border-left: none;
}

2022-09-22 15:19

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656