如何创建一个填充HTML/CSS颜色的矩形表？

-1

我试图创建一个填充颜色的表格，我使用下面的代码，但我收到一个错误。有人可以帮助我吗？提前谢谢你的帮助。如何创建一个填充HTML/CSS颜色的矩形表？

<td> 
    <div style="background-color: #2E21FF; width:500px;height:100px;border:1px solid #000; padding:0;margin:0;">This is a rectangle!</div> 
</td>

来源

2016-07-15 San

你会得到什么错误？除了只发布完整表的部分代码之外，div代码看起来很好。 – j08691

你有什么错误？您在问题中提供的代码工作得很好：https://jsfiddle.net/ts913p0v/ – Shaggy

您需要声明

和标签，然后在之内嵌套。您的代码对于表格不完整。 –

回答

<td>的样式与一个类的颜色框不同，然后所有的颜色都会与它们的类分开处理。下面是一个例子。

.color-box span { 
    border: 1px solid rgb(204, 204, 204); 
    padding: 2px; 
    padding-left: 25px; 
    margin: 0px; 
    margin-right: 10px; 
    border-radius: 3px; 
} 
.color-box { 
    border: 1px #aaa solid; 
    padding: 6px; 
    padding-right: 100px; 
    border-radius: 3px; 
    -moz-box-shadow: inset 0 0 2px 0 #888; 
    -webkit-box-shadow: inset 0 0 2px 0 #888; 
    box-shadow: inset 0 0 1px 0 #888; 
} 
.blue-box { 
    background-color: #0088cc; 
} 
.red-box { 
    background-color: #ff6161; 
} 
.green-box { 
    background-color: #70c24a; 
} 
.yellow-box { 
    background-color: #e0e03e; 
} 




<table> 
    <tr> 
    <td class="color-box"> 
     <span class="blue-box"></span> #0088cc 
    </td> 
    <td class="color-box"> 
     <span class="yellow-box"></span> #e0e03e 
    </td> 
    </tr> 
    <tr> 
    <td class="color-box"> 
     <span class="green-box"></span> #70c24a 
    </td> 
    <td class="color-box"> 
     <span class="red-box"></span> #ff6161 
    </td> 
    </tr> 
</table>

来源

2016-07-17 22:54:45

使用CSS创建表格，您可以更容易地设置样式，同时也使得HTML标记看起来更清晰。

HTML：

<div class="table"> 
    <div class="table-row"> 
    <div class="table-cell"> 
     Data for cell here 
    </div> 
    </div> 
</div>

CSS：

.table { 
    display: table-cell 
    background-color: #2E21FF; 
    width: 500px; 
    height: 100px; 
    border: 1px solid #000; 
    padding:0; 
    margin:0; 
} 

.table-row { 
    display: table-row 
} 

.table-cell { 
    display: table-cell 
}

您可以通过使用类表单元格和行创造更多的div添加更多的表格单元格的行在div分类的“桌子”内。

来源

2016-07-15 16:36:25

如何创建一个填充HTML/CSS颜色的矩形表？

回答

相关问题