카탈로그

객체 질문

과제점

솔루션

보충

목표 문제

상술한 조건을 동시에 만족시키는 표를 만들다

고정 너비 테이블의 마지막 열만 변동 너비로 설정

헤드 고정, 바디만 스크롤

도전점

헤드를 통해 고정 스크롤

thead, tbody 레이블에 display: block 또는 display: inline-block 을 설정해야 합니다.

변동폭을 실현할 수 없다

표를 블록 요소로 설정하면 변동폭의 단원과 중의 요소가 일치하게 축소되기 때문에 구조가 붕괴된다.

해결 방법

테이블 위젯 flexbox화
※ 결과 아래 CodePen만 표시
See the Pen flexbox_table by T.T ( @tkrtmy1031 )
on CodePen .

flexbox.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/flexbox.css" />
    <link rel="stylesheet" type="text/css" href="./css/view.css" />
    <title>flexbox</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th class="seq">No</th>
                <th class="fixable">固定幅列</th>
                <th class="flexible">変動幅列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="seq">1</td>
                <td class="fixable">400px</td>
                <td class="flexible">テーブル幅の余り</td>
            </tr>
            <tr>
                <td class="seq">2</td>
                <td class="fixable">400px</td>
                <td class="flexible">テーブル幅の余り</td>
            </tr>
            <tr>
                <td class="seq">3</td>
                <td class="fixable">400px</td>
                <td class="flexible">テーブル幅の余り</td>
            </tr>
            <tr>
                <td class="seq">4</td>
                <td class="fixable">400px</td>
                <td class="flexible">テーブル幅の余り</td>
            </tr>
            <tr>
                <td class="seq">5</td>
                <td class="fixable">400px</td>
                <td class="flexible">テーブル幅の余り</td>
            </tr>
       </tbody>
    </table>
</body>
</html>

flexbox.css

/* テーブル制御用CSS */

/* 固定＋変動幅混在レイアウト */

/* 1. table部品をflexbox化 */
thead, tbody, tr, th, td { 
    display: flex;
}

/* 2. セルの折り返し */
thead, tbody, tr {
    flex-direction: row;
    flex-wrap: wrap;
}

/* 3. 各行をテーブル幅いっぱいに整列 */
tr {
    width: 100%;
}

/* 4. 列（固定幅） */
.seq {
    width: 50px;
}

.fixable {
    width: 400px;
}

/* 5. 列（変動幅） */
.flexible {
    flex: 1;
}


/* スクロール（ヘッダ固定） */

/* 6. スクロール表示 */
tbody {
    height: 150px; 
    overflow-y: scroll;
}

지원

만약 대상 문제의 조건을 동시에 만족시키지 않을 수 있다면, 아래의 방법으로 제작할 수 있다p>

고정 너비 테이블의 마지막 열만 변동 너비로 만들기
- 변동폭을 원하는 열을 설정하지 않음width

See the Pen Flexible Table by T.T ( @tkrtmy1031 )
on CodePen .

헤드 고정, 바디만 스크롤
- 작업대 부품을 블록으로 나누기(정확히 인라인 블록)

See the Pen Body Scroll by T.T ( @tkrtmy1031 )
on CodePen .

그렇다고 똑같은 부품을 만드는 것은 어렵다.용도와 작업 시간에 따라 정확하게 분리하여 사용하다p>

Reference

이 문제에 관하여(고정폭+변동폭을 섞어서 머리 고정 롤링을 하고 싶어요~ flexbox 좋아요~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tkrtmy1031/items/7d747a6f420407310d1d

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

고정폭+변동폭을 섞어서 머리 고정 롤링을 하고 싶어요~ flexbox 좋아요~

카탈로그

목표 문제

도전점

해결 방법

지원

Reference

좋은 웹페이지 즐겨찾기