티스토리 테이블에 가로 스크롤 추가하는 법!

여러분, 티스토리 블로그를 쓰다 보면 가끔 테이블 내용이 길어져서 화면 밖으로 나가는 상황, 겪어본 적 있나요? 🤔 PC, 모바일 할 것 없이 깔끔하게 스크롤이 되면 좋겠죠? 그래서 준비한 “테이블에 가로 스크롤 추가하기!” 팁입니다. 아래 방법들만 따라 하면 쉽게 가로 스크롤을 추가할 수 있어요! 😊

🛠️ 방법 1: white-space: nowrap; 사용하기

테이블 스타일에 간단히 추가하는 방법이에요!

1. table 태그의 style 속성에 white-space: nowrap;를 추가해 주세요.

📌 예제 코드

<table style="white-space: nowrap;">
  <tr>
    <td>내용1</td>
    <td>내용2</td>
    <td>내용3</td>
  </tr>
</table>

 
이렇게 해두면, 테이블의 모든 열이 줄바꿈 없이 가로로 쭉 늘어나면서 스크롤이 가능해져요! 📜

🛠️ 방법 2: div 태그로 테이블 감싸기

테이블 앞뒤로 div 태그를 사용해서 감싸주는 방법입니다. 이 방법은 조금 더 자유롭게 스크롤 영역을 조절할 수 있어요. 😉

📌 예제 코드

<div style="overflow-x: auto;">
  <table>
    <tr>
      <td>내용1</td>
      <td>내용2</td>
      <td>내용3</td>
    </tr>
  </table>
</div>

 
이렇게 감싸주면 테이블이 화면 밖으로 넘어갈 때 자동으로 가로 스크롤이 생기면서 보기 편해집니다! 👍
 

🛠️ 적용하지 않은 기본 테이블

먼저, 가로 스크롤을 추가하지 않은 기본 테이블 코드입니다. 👇

<table>
  <tr>
    <td>내용1</td>
    <td>내용2</td>
    <td>내용3</td>
  </tr>
</table>

 
이 경우, 화면이 좁을 때 테이블 내용이 잘려서 보일 수 있습니다. 📉

🛠️ 적용한 가로 스크롤 테이블

이제, div에 overflow-x: auto; 속성을 적용한 예제입니다. div에 배경색도 추가해 테이블이 깔끔하게 구분되도록 했습니다. 🎨
 

<div style="overflow-x: auto; background-color: #f0f0f0; padding: 10px;">
  <table>
    <tr>
      <td>내용1</td>
      <td>내용2</td>
      <td>내용3</td>
    </tr>
  </table>
</div>

이렇게 하면 테이블이 화면 밖으로 넘어갈 때 자동으로 가로 스크롤이 생기면서 보기 편해집니다! 👍

1. 가로 스크롤을 적용하지 않은 기본 테이블

(스크롤 없이 긴 테이블이 잘리는 예시)

내용1	내용2	내용3	내용4	내용5	내용6
내용7	내용8	내용9	내용10	내용11	내용12

2. 가로 스크롤을 적용한 테이블

(스크롤을 추가하여 모든 내용을 가로로 볼 수 있는 예시)

내용1	내용2	내용3	내용4	내용5	내용6
내용7	내용8	내용9	내용10	내용11	내용12

📌 마무리

이제 티스토리 블로그에서 테이블에 가로 스크롤을 쉽게 추가하는 법을 알게 되셨죠? 📝
첫 번째 방법은 white-space: nowrap; 속성을 사용하여 간단히 테이블의 내용을 줄바꿈 없이 가로로 확장하는 방법이었고, 두 번째 방법은 div 태그로 테이블을 감싸서 가로 스크롤을 추가하는 방법이었어요. 두 방법 모두 간단하지만 매우 유용하니, 상황에 맞게 적용해 보세요! 🌟
스마트폰과 PC에서 모두 잘 작동하니, 여러분의 블로그에 긴 테이블이 필요한 경우, 더 깔끔하게 보여줄 수 있을 거예요! 💻📱
이 팁이 도움이 되셨다면, 댓글로 의견 남겨 주세요! 🙋‍♀️🙋‍♂️ 그럼 다음 포스팅에서 만나요! 👋