一行おきに色分けしたCSSテーブルデザイン
「nth-child(2n)」を使用し色分けしてます。
<html style="max-height: 100%;"><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"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
padding: 1rem;
}
.table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
color: #353535;
}
.table thead {
background: #d3e1e8;
}
.table th,
.table td {
border: 1px solid #ccc;
padding: 10px;
}
.table tr:nth-child(2n) td {
background-color: #efefef;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<table class="table">
<thead>
<tr>
<th>ヘッダー</th>
<th>ヘッダー</th>
<th>ヘッダー</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</div>
</body></html>
比較用のCSSテーブルデザイン
「nth-child」を使用し色分けしてます。
<html style="max-height: 100%;"><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"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
padding: 1rem;
}
.table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
color: #353535;
}
.table thead {
background: #d3e1e8;
}
.table th,
.table td {
border: 3px solid #fff;
padding: 10px;
background: #efefef;
}
.table th:nth-child(1) {
background-color: #fff;
border: 1px solid transparent;
border-bottom-color: #ccc;
color: #fff;
}
.table th:nth-child(2) {
background-color: #DF3F5A;
color: #fff;
}
.table th:nth-child(3) {
background-color: #3290DC;
color: #fff;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<table class="table">
<thead>
<tr>
<th></th>
<th>ヘッダー</th>
<th>ヘッダー</th>
</tr>
</thead>
<tbody>
<tr>
<td>項目</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>項目</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>項目</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>項目</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</div>
</body></html>
項目別に比較できる。境界線で囲んだCSSテーブルデザイン
料金や機能の比較に使える。おすすめを「border」で囲んで目立たせてます。
<html style="max-height: 100%;"><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"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
padding: 1rem;
}
.table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
color: #353535;
}
.table thead {
background: #999;
color: #fff;
}
.table th,
.table td {
border: 1px solid #ccc;
padding: 10px;
}
.table tr:nth-child(2n) td {
background-color: #fafafa;
}
.table th:nth-child(1),
.table td:nth-child(1) {
border-left: 5px solid #EF8633;
border-right: 5px solid #EF8633;
}
.table tr:first-child th:first-child {
position: relative;
border-top: 15px solid #EF8633;
background-color: #EF8633;
}
.table tr:first-child th:first-child::before {
position: absolute;
top: -0.65rem;
left: 50%;
transform: translateX(-50%);
padding: 0.2rem 1rem;
border-radius: 0.3rem;
background-color: #fff;
color: #EF8633;
font-size: 0.8rem;
content: '人気';
}
.table tr:last-child td:first-child {
border-bottom: 5px solid #EF8633;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<table class="table">
<thead>
<tr>
<th>ヘッダー</th>
<th>ヘッダー</th>
<th>ヘッダー</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</div>
</body></html>
特定のセルだけ背景を変えたCSSテーブルデザイン
「tr:nth-child(n) td:nth-child(n)」で行列を指定し特定のセルだけ背景を変えてます
<html style="max-height: 100%;"><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"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
padding: 1rem;
}
.table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
color: #353535;
}
.table thead {
background: #efefef;
}
.table th,
.table td {
border: 1px solid #ccc;
padding: 10px;
}
.table tr:nth-child(2) td:nth-child(3) {
background-color: #db3ba3;
color: #fff;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<table class="table">
<thead>
<tr>
<th>ヘッダー</th>
<th>ヘッダー</th>
<th>ヘッダー</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</div>
</body></html>
2列目だけ背景を変えたCSSテーブルデザイン
「td:nth-child(2)」で背景を変えてます
<html style="max-height: 100%;"><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"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
padding: 1rem;
}
.table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
color: #353535;
}
.table thead {
background: #efefef;
}
.table th,
.table td {
border: 1px solid #ccc;
padding: 10px;
}
.table td:nth-child(2) {
background-color: #3B9BDC;
color: #fff;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<table class="table">
<thead>
<tr>
<th>ヘッダー</th>
<th>ヘッダー</th>
<th>ヘッダー</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</div>
</body></html>
ヘッダー、フッターの背景を変えたCSSテーブルデザイン
「thead」「tfoot」タグに「background-color」を指定し背景を変えてます
<html style="max-height: 100%;"><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"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
padding: 1rem;
}
.table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
color: #353535;
}
.table thead {
background: #d3ead3;
}
.table th,
.table td {
border: 1px solid #ccc;
padding: 10px;
}
.table tfoot{
background-color:#728472;
color:#fff;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<table class="table">
<thead>
<tr>
<th>ヘッダー</th>
<th>ヘッダー</th>
<th>ヘッダー</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>フッター</th>
<th>フッター</th>
<th>フッター</th>
</tr>
</tfoot>
</table>
</div>
</body></html>
垂直線を入れたシンプルなCSSテーブルデザイン
「th」「td」タグに「border-right」を指定し水平線を入れてます
<html style="max-height: 100%;"><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"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
padding: 1rem;
}
.table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ccc;
color: #353535;
}
.table thead {
background: #ede6d3;
}
.table th,
.table td {
border-right: 1px solid #ccc;
padding: 10px;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<table class="table">
<thead>
<tr>
<th>ヘッダー</th>
<th>ヘッダー</th>
<th>ヘッダー</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</div>
</body></html>
水平線を引いたシンプルなCSSテーブルデザイン
「tr」タグで「border」を指定し水平線を引いてます
<html style="max-height: 100%;"><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"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
padding: 1rem;
}
.table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ccc;
color: #353535;
}
.table thead {
background: #EFD7D3;
}
.table tr {
border-bottom: 1px solid #ccc;
}
.table th,
.table td {
padding: 10px;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<table class="table">
<thead>
<tr>
<th>ヘッダー</th>
<th>ヘッダー</th>
<th>ヘッダー</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</div>
</body></html>
枠線を入れたシンプルなCSSテーブルデザイン
「th」「td」タグに「border」を指定し水平線を入れてます
<html style="max-height: 100%;"><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"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
padding:1rem;
background-color: #fefefe;
}
.table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
color: #353535;
}
.table thead {
background: #d3edeb;
}
.table th,
.table td {
border: 1px solid #ccc;
padding: 10px;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<table class="table">
<thead>
<tr>
<th>ヘッダー</th>
<th>ヘッダー</th>
<th>ヘッダー</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</div>
</body></html>