Html 如何在CSS中制作好表格_Html_Css

Html 如何在CSS中制作好表格

html css

Html 如何在CSS中制作好表格,html,css,Html,Css,我想要一张像这样的桌子。我该怎么做？我想要像这样的绿色和浅绿色。我想用紫色和兰花利用引导表在HTML中创建干净的表另外还有一个可选=>MaterialUI 如果使用react，请使用react带 @导入url（'https://fonts.googleapis.com/css2?family=Ubuntu&display=swap'); 身体{ 溢出x：隐藏； } 桌子{ 宽度：60%；保证金：自动；字体系列：“Ubuntu”，无衬线；字体大小：粗体； } 表tr td，表th

我想要一张像这样的桌子。我该怎么做？我想要像这样的绿色和浅绿色。我想用紫色和兰花

利用引导表在HTML中创建干净的表

另外还有一个可选=>MaterialUI

如果使用react，请使用react带


@导入url（'https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
身体{
溢出x：隐藏；
}
桌子{
宽度：60%；
保证金：自动；
字体系列：“Ubuntu”，无衬线；
字体大小：粗体；
}
表tr td，表th{
填充：10px 10px；
文本对齐：居中；
背景：#da70d6；
字体大小：400；
文本对齐：居中；
垂直对齐：中间对齐；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
边框：1px实心透明；
边框顶色：透明；
右边框颜色：透明；
边框底色：透明；
左边框颜色：透明；
字号：1rem；
线高：1.5；
边界半径：.25rem；
过渡：颜色。15秒慢进慢出，背景色。15秒慢进慢出，边框色。15秒慢进慢出，方框阴影。15秒慢进慢出；
}
表th{
背景图像：线性渐变（向右，#6441A5 0%，#2a0845 51%，#6441A5 100%）；
颜色：#fff；
文本阴影：1px 1px#000；
字号：800；
}
表tr:n个孩子（1）第n个孩子（1）{
背景：无；
}
表tr:N个孩子（15）td，表tr:N个孩子（15）td{
背景：无；
颜色：#6441A5；
字号：1.5em；
文本阴影：1px 1px#000；
}
表td i{
颜色：#6441A5；
}
@介质（最大宽度：900px）{
桌子{
最大宽度：99%；
宽度：99%；
}
表tr td，表th{
字体大小：0.7em；
}
表tr:N个孩子（15）td，表tr:N个孩子（15）td{
字号：1em；
}
}
@介质（最大宽度：450像素）{
桌子{
最大宽度：99%；
宽度：99%；
}
表tr td，表th{
字号：0.6em；
}
表tr:N个孩子（15）td，表tr:N个孩子（15）td{
字体大小：0.7em；
}
}
智能起动器
智能媒体
聪明的生意
智能豪华型
存储空间
512MB
1GB
2GB
4GB
带宽
50GB
100GB
150GB
无限的
MySQL数据库
无限的
无限的
无限的
无限的
安装程序
19.90 $
12.90 $
自由的
自由的
PHP 5
RubyonRails
月价
$ 2.90
$ 5.90
$ 9.90
$ 14.90

这是一个没有引导的示例。我使用字体真棒的图标，看看完整的代码在这里

表格{
字体系列：无衬线；
}
.table>tbody>tr>td，
.table>tbody>tr>th，
.table>tfoot>tr>td，
.table>tfoot>tr>th，
.table>thead>tr>td，
.table>thead>tr>th{
文本对齐：居中；
填充：1rem 3rem；
字体大小：.8rem；
}
.table>thead>tr>th：第一个孩子{
背景色：未设置；
}
.table>thead>tr>th{
边界半径：6px 6px 0；
}
.table>tbody>tr>th{
边界半径：6px 0 0px 6px；
}
.table>thead>tr>th、.table>tbody>tr>th{
背景色：#9BD727；
颜色：白色；
}
.table>tbody>tr>td{
背景色：#DEF2CC；
颜色：黑色；
}
.table>tfoot>tr>td{
颜色：9BD727；
字号：1rem；
}
.fa支票{
颜色：9BD727；
}


智能起动器
智能媒体
智慧商业
智能豪华型
存储空间
512MB
1GB
2 GB
4 GB
班迪夫特
50 GB
100GB
150 GB
无限的
MySQL数据库
无限的
无限的
无限的
无限的
安装程序
19.90 $
12.90 $
自由的
自由的
PHP 5
RubyonRails
月价
$ 2.90
$ 5.90
$ 9.90
$ 14.90

只是为了勾选我使用的外部插件。您可以删除它。删除“head标签中的样式表”，并将表单元格中的i标签“”替换为“✓”


@导入url（'https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
身体{
溢出x：隐藏；
}
桌子{
宽度：60%；
保证金：自动；
字体系列：“Ubuntu”，无衬线；
字体大小：粗体；
}
表tr td，表th{
填充：10px 10px；
文本对齐：居中；
背景：#da70d6；
字体大小：400；
文本对齐：居中；
垂直对齐：中间对齐；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
边框：1px实心透明；
边框顶色：透明；
右边框颜色：透明；
边框底色：透明；
左边框颜色：透明；
字号：1rem；
线高：1.5；
边界半径：.25rem；
过渡：颜色。15秒慢进慢出，背景色。15秒慢进慢出，边框色。15秒慢进慢出，方框阴影。15秒慢进慢出；
}
表th{
背景图像：线性渐变（向右，#6441A5 0%，#2a0845 51%，#6441A5 100%）；
颜色：#fff；
文本阴影：1px 1px#000；
字号：800；
}
表tr:n个孩子（1）第n个孩子（1）{
背景：无；
}
表tr:N个孩子（15）td，表tr:N个孩子（15）td{
背景：无；
颜色：#6441A5；
字号：1.5em；
文本阴影：1px 1px#000；
}
表td i{
颜色：#6441A5；
}
@介质（最大宽度：900px）{
桌子{
最大宽度：99%；
宽度：99%；
}
表tr td，表th{
字体大小：0.7em；
}
表tr:N个孩子（15）td，表tr:N个孩子（15）td{
字号：1em；
}
}
@介质（最大宽度：450像素）{
桌子{
最大宽度：99%；
宽度：99%；
}
表tr td，表th{
字号：0.6em；
}
表tr:N个孩子（15）td，表tr:N个孩子（15）td{
字体大小：0.7em；
}
}
智能起动器
智能媒体
聪明的生意
智能豪华型
存储空间
512MB
1GB
2GB
4GB
带宽
50GB
100GB
150GB
无限的
MySQL数据库
无限的
无限的
无限的
无限的
安装程序
19.90 $
12.90 $
自由的
自由的
PHP 5
✓；
✓；
✓；
✓；
RubyonRails
✓；
✓；
✓；
✓；
月价
$ 2.90
$ 5.90
$ 9.90
$ 14.90

对不起，兄弟。我找不到。你能帮我做一个吗？堆栈溢出是一个收集知识和深入学习编码的地方。如果您愿意，请随时与我联系并

<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
body{
overflow-x:hidden;
}
table{
width:60%;
margin:auto;
font-family: 'Ubuntu', sans-serif;
font-weight:bold;
}
table tr td, table th{
padding:10px 10px;
text-align:center;
background:#da70d6;
font-weight: 400;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
table th{
background-image: linear-gradient(to right, #6441A5 0%, #2a0845  51%, #6441A5  100%);
color:#fff;
text-shadow:1px 1px #000;
font-weight:800;
}
table tr:nth-child(1) th:nth-child(1){
background:none;
}
table tr:nth-child(15) td, table tr:nth-child(15) th{
background:none;
color:#6441A5;
font-size:1.5em;
text-shadow:1px 1px #000;
}
table td i{
color:#6441A5;
}

@media (max-width:900px){
table{
max-width:99%;
width:99%;
}
table tr td, table th{
font-size:0.7em;
}
table tr:nth-child(15) td, table tr:nth-child(15) th{
font-size:1em;
}
}

@media (max-width:450px){
table{
max-width:99%;
width:99%;
}
table tr td, table th{
font-size:0.6em;
}
table tr:nth-child(15) td, table tr:nth-child(15) th{
font-size:0.7em;
}
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th>Smart Starter</th>
<th>Smart Medium</th>
<th>Smart Business</th>
<th>Smart Deluxe</th>
<tr>
<tr>
<th>Storage Space</th>
<td>512MB</td>
<td>1GB</td>
<td>2GB</td>
<td>4GB</td>
<tr>
<tr>
<th>Band Width</th>
<td>50GB</td>
<td>100GB</td>
<td>150GB</td>
<td>Unlimited</td>
<tr>
<tr>
<th>MySQL Databases</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<tr>
<tr>
<th>Setup</th>
<td>19.90 $</td>
<td>12.90 $</td>
<td>free</td>
<td>free</td>
<tr>
<tr>
<th>PHP 5</th>
<td>&#x2713;</td>
<td>&#x2713;</td>
<td>&#x2713;</td>
<td>&#x2713;</td>
<tr>
<tr>
<th>Ruby On Rails</th>
<td>&#x2713;</td>
<td>&#x2713;</td>
<td>&#x2713;</td>
<td>&#x2713;</td>
<tr>
<tr>
<th>Price per month</th>
<td>$ 2.90</td>
<td>$ 5.90</td>
<td>$ 9.90</td>
<td>$ 14.90</td>
<tr>
</table>
<script>
</script>
</body>
</html>