見た目の良いレスポンシブなテーブルを作成 / Creating visually appealing responsive tables

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creating visually appealing responsive tables</title>

    <!--
    # Creating visually appealing responsive tables
    - Ensure titles and contents wrap as little as possible.
    - Display content width-wise, avoiding extra space around tables.
    - Center tables on the screen.
    - Ensure readability even on narrow screens.

    # 見た目の良いレスポンシブなテーブルを作成
    - タイトルも内容もできる限り折り返されることがないように表示
    - テーブルの幅に余白ができないようにコンテンツの幅で表示
    - テーブルを画面の中央に表示
    - 幅の狭い画面でも見やすく表示

    Example classes:
    <table class="table-sc full-width center horizontal zebra gray hover">
        ...
    </table>
    -->

    <style>
        /* Center the table */
        /* テーブルを中央寄せにする */
        .center {
            display: block;
            margin: 10px auto 30px auto;
        }

        .table-sc {
            display: table;
        }

        .table-sc tbody {
            display: grid;
            grid-template-columns: max-content max-content;
            width: fit-content;
        }

        /* If you want the table to occupy the full width of its parent */
        /* テーブルの幅を親要素の幅一杯にしたい場合 */
        .table-sc.full-width tbody {
            grid-template-columns: minmax(20px, auto) 1fr;
            width: auto;
        }

        /* .table-sc tbody, */
        .table-sc tr {
            display: contents;
        }

        .table-sc th,
        .table-sc td {
            padding: 8px;
        }

        .table-sc th {
            text-align: left;
            font-weight: normal;
        }

        .table-sc.align-center td {
            text-align: center !important;
        }

        .table-sc.border td {
            border: 1px solid #555 !important;
            padding: 1% 2%;
        }

        .table-sc.clear {
            grid-template-columns: minmax(4px, auto) 1fr;
            border: none;
        }

        .table-sc.clear td {
            border: none !important;
        }

        .table-sc.clear td:first-child {
            padding-left: 0;
        }

        .table-sc.clear td:last-child {
            padding-right: 0;
        }

        .table-sc.zebra tr:nth-child(odd) th,
        .table-sc.zebra tr:nth-child(odd) td {
            background: #fcfcfc !important;
        }

        .table-sc.zebra tr:nth-child(even) th,
        .table-sc.zebra tr:nth-child(even) td {
            background: #eee !important;
        }

        .table-sc.hover tr:hover th,
        .table-sc.hover tr:hover td {
            background: #ffffdc !important;
        }

        .table-sc.gray tbody {
            text-shadow: 1px 1px 0px #fff;
            background: #eaebec;
            margin: 20px 0 20px 4px;
            border: #ccc 1px solid;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -moz-box-shadow: 0 1px 2px #d1d1d1;
            -webkit-box-shadow: 0 1px 2px #d1d1d1;
            box-shadow: 0 1px 2px #d1d1d1;
        }

        .table-sc.gray th {
            border-top: 1px solid #fafafa;
            border-right: none;
            border-bottom: 1px solid #e0e0e0;
            border-left: 1px solid #e0e0e0;
            background: #ededed;
            background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
            background: -moz-linear-gradient(top, #ededed, #ebebeb);
        }

        .table-sc.gray th {
            -moz-border-radius-topleft: 3px;
            -webkit-border-top-left-radius: 3px;
            border-top-left-radius: 3px;
        }

        .table-sc.gray td {
            -moz-border-radius-topright: 3px;
            -webkit-border-top-right-radius: 3px;
            border-top-right-radius: 3px;
        }

        .table-sc.gray td:nth-child(2n-1) {
            border-left: none;
        }

        .table-sc.gray th,
        .table-sc.gray td {
            border-top: none;
            border-right: none;
            border-bottom: 1px solid #e0e0e0;
            border-left: 1px solid #e0e0e0;
            background: #fafafa;
            background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
            background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
        }

        .table-sc.gray tr:nth-child(even) th,
        .table-sc.gray tr:nth-child(even) td {
            background: #f2f2f2;
            background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f2f2f2));
            background: -moz-linear-gradient(top, #f8f8f8, #f2f2f2);
        }

        .table-sc.gray tr:first-child th {
            -moz-border-radius-topleft: 3px;
            -webkit-border-top-left-radius: 3px;
            border-top-left-radius: 3px;
        }

        .table-sc.gray tr:last-child th {
            -moz-border-radius-bottomleft: 3px;
            -webkit-border-bottom-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .table-sc.gray tr:first-child td {
            -moz-border-radius-topright: 3px;
            -webkit-border-top-right-radius: 3px;
            border-top-right-radius: 3px;
        }

        .table-sc.gray tr:last-child td {
            -moz-border-radius-bottomright: 3px;
            -webkit-border-bottom-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }

        .table-sc.horizontal caption {
            font-weight: bold;
            border-bottom: 3px solid #ccc !important;
            margin: 10px;
            padding: 4px;
        }

        .table-sc.horizontal tbody {
            border-top: none !important;
            border-right: none !important;
            border-bottom: none !important;
            border-left: none !important;
        }

        .table-sc.horizontal th,
        .table-sc.horizontal td {
            border-top: none !important;
            border-right: none !important;
            border-bottom: 1px solid #ccc !important;
            border-left: none !important;
        }

        @media screen and (max-width: 640px) {

            .table-sc tbody,
            .table-sc.full-width tbody {
                grid-template-columns: auto;
            }

            .table-sc tr {
                display: flex;
                flex-direction: column;
            }

            .table-sc th {
                font-size: .9em;
            }

            .table-sc td:nth-child(even) {
                padding-left: 2em;
                margin-bottom: 16px;
                border-bottom: none !important;
            }

        }
    </style>

</head>

<body>

    <article>

        <table class="table-sc horizontal center hover">
            <caption>Creating visually appealing responsive tables</caption>
            <tbody>
                <tr>
                    <th>Title 1</th>
                    <td class="td">Contents 1</td>
                </tr>
                <tr>
                    <th>Long long long title 2</th>
                    <td class="td">Contents contents contents 2</td>
                </tr>
                <tr>
                    <th>Title 3</th>
                    <td class="td">Contents 3</td>
                </tr>
                <tr>
                    <th>日本語のタイトル</th>
                    <td class="td">日本語の内容、日本語の内容、日本語の内容。</td>
                </tr>
            </tbody>
        </table>

    </article>

</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

<!DOCTYPE html>

<head>

<title>Creating visually appealing responsive tables</title>

<!--

# Creating visually appealing responsive tables

- Ensure titles and contents wrap as little as possible.

- Display content width-wise, avoiding extra space around tables.

- Center tables on the screen.

- Ensure readability even on narrow screens.

# 見た目の良いレスポンシブなテーブルを作成

- タイトルも内容もできる限り折り返されることがないように表示

- テーブルの幅に余白ができないようにコンテンツの幅で表示

- テーブルを画面の中央に表示

- 幅の狭い画面でも見やすく表示

Example classes:

...

</table>

-->

<style>

/* Center the table */

/* テーブルを中央寄せにする */

.center {

display: block;

margin: 10px auto 30px auto;

}

.table-sc {

display: table;

}

.table-sc tbody {

display: grid;

grid-template-columns: max-content max-content;

width: fit-content;

}

/* If you want the table to occupy the full width of its parent */

/* テーブルの幅を親要素の幅一杯にしたい場合 */

.table-sc.full-width tbody {

grid-template-columns: minmax(20px, auto) 1fr;

width: auto;

}

/* .table-sc tbody, */

.table-sc tr {

display: contents;

}

.table-sc th,

.table-sc td {

padding: 8px;

}

.table-sc th {

text-align: left;

font-weight: normal;

}

.table-sc.align-center td {

text-align: center !important;

}

.table-sc.border td {

border: 1px solid #555 !important;

padding: 1% 2%;

}

.table-sc.clear {

grid-template-columns: minmax(4px, auto) 1fr;

border: none;

}

.table-sc.clear td {

border: none !important;

}

.table-sc.clear td:first-child {

padding-left: 0;

}

.table-sc.clear td:last-child {

padding-right: 0;

}

.table-sc.zebra tr:nth-child(odd) th,

.table-sc.zebra tr:nth-child(odd) td {

background: #fcfcfc !important;

}

.table-sc.zebra tr:nth-child(even) th,

.table-sc.zebra tr:nth-child(even) td {

background: #eee !important;

}

.table-sc.hover tr:hover th,

.table-sc.hover tr:hover td {

background: #ffffdc !important;

}

.table-sc.gray tbody {

text-shadow: 1px 1px 0px #fff;

background: #eaebec;

margin: 20px 0 20px 4px;

border: #ccc 1px solid;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

-moz-box-shadow: 0 1px 2px #d1d1d1;

-webkit-box-shadow: 0 1px 2px #d1d1d1;

box-shadow: 0 1px 2px #d1d1d1;

}

.table-sc.gray th {

border-top: 1px solid #fafafa;

border-right: none;

border-bottom: 1px solid #e0e0e0;

border-left: 1px solid #e0e0e0;

background: #ededed;

background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));

background: -moz-linear-gradient(top, #ededed, #ebebeb);

}

.table-sc.gray th {

-moz-border-radius-topleft: 3px;

-webkit-border-top-left-radius: 3px;

border-top-left-radius: 3px;

}

.table-sc.gray td {

-moz-border-radius-topright: 3px;

-webkit-border-top-right-radius: 3px;

border-top-right-radius: 3px;

}

.table-sc.gray td:nth-child(2n-1) {

border-left: none;

}

.table-sc.gray th,

.table-sc.gray td {

border-top: none;

border-right: none;

border-bottom: 1px solid #e0e0e0;

border-left: 1px solid #e0e0e0;

background: #fafafa;

background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));

background: -moz-linear-gradient(top, #fbfbfb, #fafafa);

}

.table-sc.gray tr:nth-child(even) th,

.table-sc.gray tr:nth-child(even) td {

background: #f2f2f2;

background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f2f2f2));

background: -moz-linear-gradient(top, #f8f8f8, #f2f2f2);

}

.table-sc.gray tr:first-child th {

-moz-border-radius-topleft: 3px;

-webkit-border-top-left-radius: 3px;

border-top-left-radius: 3px;

}

.table-sc.gray tr:last-child th {

-moz-border-radius-bottomleft: 3px;

-webkit-border-bottom-left-radius: 3px;

border-bottom-left-radius: 3px;

}

.table-sc.gray tr:first-child td {

-moz-border-radius-topright: 3px;

-webkit-border-top-right-radius: 3px;

border-top-right-radius: 3px;

}

.table-sc.gray tr:last-child td {

-moz-border-radius-bottomright: 3px;

-webkit-border-bottom-right-radius: 3px;

border-bottom-right-radius: 3px;

}

.table-sc.horizontal caption {

font-weight: bold;

border-bottom: 3px solid #ccc !important;

margin: 10px;

padding: 4px;

}

.table-sc.horizontal tbody {

border-top: none !important;

border-right: none !important;

border-bottom: none !important;

border-left: none !important;

}

.table-sc.horizontal th,

.table-sc.horizontal td {

border-top: none !important;

border-right: none !important;

border-bottom: 1px solid #ccc !important;

border-left: none !important;

}

@media screen and (max-width: 640px) {

.table-sc tbody,

.table-sc.full-width tbody {

grid-template-columns: auto;

}

.table-sc tr {

display: flex;

flex-direction: column;

}

.table-sc th {

font-size: .9em;

}

.table-sc td:nth-child(even) {

padding-left: 2em;

margin-bottom: 16px;

border-bottom: none !important;

}

</style>

</head>

<body>

<caption>Creating visually appealing responsive tables</caption>

<tbody>

<tr>

<th>Title 1</th>

<td class="td">Contents 1</td>

</tr>

<tr>

<th>Long long long title 2</th>

<td class="td">Contents contents contents 2</td>

</tr>

<tr>

<th>Title 3</th>

<td class="td">Contents 3</td>

</tr>

<tr>

<th>日本語のタイトル</th>

<td class="td">日本語の内容、日本語の内容、日本語の内容。</td>

</tr>

</tbody>

</table>

</article>

</body>

</html>

表示試験 / Try displaying

コメントを残す