<div class="box">
            <h1>table Tag</h1>
            <table>
                <colgroup>
                    <col width="auto" />
                    <col width="5%" />
                    <col width="10%" />
                    <col width="10%" />
                </colgroup>
        
                <tr>
                    <td class="col1">제목</td>
                    <td class="col2">조회수 </td>
                    <td class="col3">작성자 </td>
                    <td class="col4">날짜 </td>
                </tr>
                <tr>
                    <td class="col1">제목1 </td>
                    <td class="col2">10 </td>
                    <td class="col3">홍길동 </td>
                    <td class="col4">2019.05.01 </td>
                </tr>
            </table>
        
    </div>

    <div class="box">
    <h1>ul li Tag & display : table </h1>
    <ul class="table">
        <li>
            <span class="col1">제목</span>
            <span class="col2">조회수</span>
            <span class="col3">작성자</span>
            <span class="col4">날짜</span>
        </li>
        <li>
            <span class="col1">제목1</span>
            <span class="col2">10</span>
            <span class="col3">홍길동</span>
            <span class="col4">2019.05.01</span>
        </li>
    </ul>
</div>

<div class="box">
    <h1>ul li Tag & float </h1>
    <ul class="float">
        <li>
            <span class="col1">제목</span>
            <span class="col2">조회수</span>
            <span class="col3">작성자</span>
            <span class="col4">날짜</span>
        </li>
        <li>
            <span class="col1">제목1</span>
            <span class="col2">10</span>
            <span class="col3">홍길동</span>
            <span class="col4">2019.05.01</span>
        </li>
    </ul>
</div>

<div class="box">

        <h1>flex</h1>
    <div class="flex">
        <div class="list">
                <span class="col1">제목</span>
                <span class="col2">조회수</span>
                <span class="col3">작성자</span>
                <span class="col4">날짜</span>
        </div>
        <div class="list">
                <span class="col1">제목1</span>
                <span class="col2">10</span>
                <span class="col3">홍길동</span>
                <span class="col4">2019.05.01</span>
        </div>
    </div>
</div>
<div class="box">

        <h1>grid </h1>
    <div class="grid">
        <div class="list">

            <span class="col1">제목</span>
            <span class="col2">조회수</span>
            <span class="col3">작성자</span>
            <span class="col4">날짜</span>
        </div>
        <div class="list">
                <span class="col1">제목1</span>
                <span class="col2">10</span>
                <span class="col3">홍길동</span>
                <span class="col4">2019.05.01</span>
        </div>
    </div>
</div> 
*{padding:0; margin:0; box-sizing: border-box;}
ul,li{list-style:none;}

.box{width: 100%; max-width: 1024px; margin:  50px auto;}

table{width: 100%;text-align: center; border: 1px solid #ccc;
  border-collapse: collapse;
  border-spacing: 0;}
table tr td {padding: 10px 0;border-bottom: 1px solid #ccc;}

ul.table{display: table; width: 100%; border: 1px solid #ccc; text-align: center;}
ul.table li{display: table-row;}
ul.table li span{display: table-cell; padding: 10px 0;border-bottom: 1px solid #ccc;}
ul.table li:last-child span{border-bottom: 0;}
ul.table li span.col1{width: auto;}
ul.table li span.col2{width: 5%;}
ul.table li span.col3{width: 10%;}
ul.table li span.col4{width: 10%;}



ul.float{width: 100%; border: 1px solid  #ccc; text-align: center;}
ul.float li{width: 100%; border-bottom: 1px solid #ccc; padding: 10px 0;}
ul.float li:last-child{border-bottom: 0;}
ul.float li::after{display: block; content: ""; clear: both;}
ul.float li span{float: left;}
ul.float li span.col1{width: 75%;}
ul.float li span.col2{width: 5%;}
ul.float li span.col3{width: 10%;}
ul.float li span.col4{width: 10%;}

.flex {border: 1px solid #ccc;}
.flex .list{display: flex; flex-wrap: nowrap; text-align: center;  border-bottom: 1px solid #ccc;padding: 10px 0;}
.flex .list:last-child{border-bottom: 0;}
.flex .list>span{flex-shrink: 1; flex-grow: 1;flex-basis: 10%;}
.flex .list span.col1{flex-basis: 75%;}
.flex .list span.col2{flex-basis: 5%;}

.grid {border: 1px solid #ccc; text-align: center;}
.grid .list{display: grid;  grid-template-columns: 75% 5% 10% 10%; padding: 10px 0; border-bottom: 1px solid #ccc;}
.grid .list:last-child{border-bottom: 0;}


@media (max-width: 780px){
    .box{box-sizing: border-box; padding: 0 20px;}
    table{text-align: left; }
    table tr{display:block; border-bottom:1px solid #ccc;}
    table tr:last-child{border:0;}
    table tr td {display: inline-block; margin-right: 5px; padding: 5px 0 0 5px; border : 0;}
    table tr td.col1{display: block;}


    ul.table{ text-align: left;}
    ul.table li{display: block; border-bottom: 1px solid #ccc;}
  ul.table li:last-child{border-bottom: 0;}
    ul.table li span{display: inline-block;; padding: 5px 0 0 5px; border-bottom: 0; margin-right: 5px; width: auto;}
    ul.table li span.col1{display: block;}
    ul.table li span.col2, ul.table li span.col3, ul.table li span.col4{width: auto;}

    ul.float{text-align: left;}
    ul.float li{ padding: 5px;}
    ul.float li span{float: left;}
    ul.float li span.col1{width: 100%; padding-bottom: 5px;}
    ul.float li span.col2{width: 8%;}
    ul.float li span.col3{width: 10%;}
    ul.float li span.col4{width: 10%;}



    .flex .list{display: flex; flex-wrap: wrap; text-align: left;  padding: 5px;}
    .flex .list>span{flex-shrink: 0; flex-grow:0;flex-basis: 10%;}
    .flex .list span.col1{flex-basis: 100%;padding-bottom: 5px;}
    .flex .list span.col2{flex-basis: 8%;}

    .grid {text-align: left;}
    .grid .list{
        padding: 5px 0 0 5px;
        grid-template-columns:10% 10% 10% auto;
        grid-template-areas: 
        "col1 col1 col1 col1 "
        "col2 col3 col4 . "
    }
    .grid .list span.col1{grid-area: col1; padding-bottom: 5px;}
    .grid .list span.col2{grid-area: col2;}
    .grid .list span.col3{grid-area: col3;}
    .grid .list span.col4{grid-area: col4;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.