/* ブラウザの初期設定をクリア */
.filelist
{
    display: table;
}

.filelist dl
,.filelist dt
,.filelist dd
{
    margin: 0; padding: 0;
}

/* 表組の基本設定 */
.filelist dt,
.filelist dd
{
    font-size: 16px; /* 文字サイズ */
    height: 24px; /* 1行の高さ */
    padding: 4px 0 0 4px; /* 枠内 padding： 数値で指定する */
    overflow: hidden; /* あふれたら非表示 */
    white-space: nowrap; /* 高さが揃っている事が必要なので、改行ができない（行数が決まっていればOK） */
    float: left;
    border-bottom: 1px solid gray; /* 罫線の幅と色（以下2行、および dtの定義内、メディアクエリ設定内に同じ属性を設定） */
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    margin-top: -1px; /* border幅：上下罫線の重複を解消 */
}

/* 見出し列 */
.filelist dt
{
    background-color: #DCE6F1; /* 背景色 */
	border-left: 1px solid gray; /* 罫線の幅と色（上の基本設定と同じものを指定） */
    margin-left: -1px; /* 左側罫線の重複を解消 */
}

/* 内容列 */
.filelist dd
{
    background-color: #FFFFFF; /* 背景色 */
}

/* 幅の指定: 基本は2列 */
/* 表組全体の外枠に該当 */
.filelist
{
    width: 804px; /* 列幅の合計 + border幅(1px) x 列数 */
}



/* 見出し列 */
.filelist dt
{
    width: 145px; /* 見出し列幅 - border幅(1px) - padding幅(4px) */
}



/* 内容列 */
.filelist dd
{
    width: 245px; /* 内容列幅 - border幅(1px) - padding幅(4px) */
}



/* 中間幅の時は1列表示 */
@media screen and (min-width: 632px) and (max-width: 1800px) { /* 表＋左右マージンを取る事を考えて、幅を指定する */
    /* 表組全体の外枠に該当 */
    .filelist
     {
    width: 800px; /* 列幅の合計 + border幅(1px) x 列数 */
    }



    /* 見出し列 */
    .filelist dt
    {
    width: 200px; /* 見出し列幅 - border幅(1px) - padding幅(4px) */
    }



    /* 内容列 */
    .filelist dd
    {
    width: 450px; /* 内容列幅 - border幅(1px) - padding幅(4px) */
    }
}



/* 幅が指定より狭いときは見出し列と内容を上下に表示 */
@media screen and (max-width: 631px) { /* 表＋左右マージンを取る事を考えて、幅を指定する */
    .filelist {width: 100%;}
    .filelist dt
    ,.filelist dd
     {
        width: 95%;
        border-left: 1px solid gray; /* 罫線復活 */
        margin-left: 0; /* 罫線復活 */
    }
}