如何創建一個填充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

相關問題