Question

我目前有以下表格定义：

<table border="1" cellspacing="0" bordercolor="#CEDFEF" cellpadding="1">

我正在尝试将其转换为CSS，使用：

table{border:1px solid #CEDFEF;cellspacing = 0px;cellpadding = 1px}

但是，表格不应该呈现。我做错了什么？

其次，如果我想不将此样式应用于特定的一个表，我该怎么做？

Answer 1

我预计问题在于cellpading和/或cellspacing。这不是有效的CSS：

cellspacing = 0px;cellpadding = 1px

已经有一些问题：

Set cellpadding and cellspacing in CSS?

Why are cellspacing and cellpadding not CSS styles

我希望这会对你有所帮助。

Answer 2

你在这里＆amp;祝你有美好的一年！

您需要使用边框，填充和颜色与cellpadding和默认内容优化css中的表。您网站中所有表格的代码：

table { 
width: 100%;
border-collapse: collapse;
border-bottom:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;
margin-bottom: 10px;
background-color: #FFF; 
}

table td {
padding: 4px 10px;
border-right:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
}

table th {
padding: 4px;
text-align: left;
border-right:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
font-weight: normal;
}

table tr {
border-left:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;
}

并且对于没有通用样式的表，只需将该类添加到表标记（exapmle1）：

table.example1 {
width: 100%;
border-collapse: collapse;
border-bottom:0px solid #e1e1e1;
border-top:0px solid #e1e1e1;
margin-bottom: 20px;
padding-bottom: 20px;
background-color: #FFF;
}

table.example1 td {
padding: 0px 0px;
border-right:0px solid #e1e1e1;
border-left:0px solid #e1e1e1;
}

table.exapmle1 th {
padding: 0px;
text-align: left;
border-right:0px solid #e1e1e1;
border-left:0px solid #e1e1e1;
font-weight: normal;
}

table.example1 tr {
border-left:0px solid #e1e1e1;
border-top:0px solid #e1e1e1;
}

此外，您可以使用更多课程自定义许多内容......

table.exapmle1 td {
text-align: center;
}

table.exapmle1 td.left {
text-align: left;
font-weight: bold;
}

table.exapmle1 td.right {
text-align: right;
}

并将类添加到td标记中。例如。

希望这有帮助。

Answer 3

通常无法转换与表相关的HTML属性，以便保留精确的外观。主要原因是HTML属性在不同的浏览器中具有模糊的定义和不同的解释，正如您可以看到的那样。通过在IE和Firefox上查看具有给定属性的页面。无法在CSS中复制此浏览器依赖性。

以下样式表（假设您的标记具有<table class=t>）尝试复制具有给定属性的表的“典型”或“平均”呈现：

table.t { 
  border-collapse: collapse;
  border: outset #CEDFEF 2px;
}
table.t th, table.t td { 
  border: inset #CEDFEF 2px;
  padding: 1px;
}

将表示HTML属性转换为CSS很少有用。在设计新的或完全重写的文档时，最好从所需的外观开始，而不是从某些现有或假设的HTML属性开始。例如，实心边框通常看起来比<table border>创建的一开始或内边框更好，并且1px的填充很少适合（通常你想要左边和右边没有填充或几个像素，顶部没有底部）。

一般信息：Mapping presentational HTML to CSS。另请参阅WHATWG HTML5草案 Rendering 部分中的Tables小节。

Answer 4

这是CSS样式的另一种方式.. !!

在html中设置许多表格时，我们可以按照这种方式进行.. !!

希望它是完整的帮助

在Css中：

#list
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border:dashed;
background-color:#CC0099;
border-bottom:1px dashed;
border-top:1px dashed;
border-collapse:collapse;
}

在Body部分，我们可以简单地命名...... !!

<table id="list">

从HTML样式转向CSS样式

4 个答案: