Question

我尝试创建一个填充颜色的表，我使用下面的代码，但我收到一个错误。有人可以帮助我吗？感谢您的帮助。

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

Answer 1

使用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分类'table'中使用classes table-cell和row创建更多div来添加更多表格单元格行。

Answer 2

<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>

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

2 个答案: