Question

我尝试过不同的风格，但我无法达成解决方案，我需要做到：

但是我的代码产生如下输出：

我想给一些空间（背景颜色相同），但是任何一张桌子都上升或根本不起作用。如果有人可以提供帮助，我会很高兴。

这是我的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="extension.css" />

<div class="container">

  <div class="jumbotron">

    <div class="white"> <table>
        <tr>
          <td class='magenta'></td>
          <td class='magenta'></td>

          <tr>
            <td class="yellow"></td>
            <td class="blue"></td>

            <tr>

              <td class="white"></td>
              <td class="white"></td>

      </table>
    </div>
    <div class="white"> <table>
        <tr>
          <td class='magenta'></td>
          <td class='magenta'></td>

          <tr>
            <td class="yellow"></td>
            <td class="blue"></td>

            <tr>
              <td class="white"></td>
              <td class=""></td>

      </table> </div> <br><br><br>

    <div class="white">
      <table>
        <tr>
          <td class=''></td>
          <td class='magenta'></td>

          <tr>
            <td class="yellow"></td>
            <td class="blue"></td>

            <tr>
              <td class="white"></td>
              <td class="red"></td>

      </table>
    </div>

    <div class="white">
      <table>
        <tr>
          <td class='magenta'></td>
          <td class="green"></td>

          <tr>
            <td class=""></td>
            <td class="blue"></td>

            <tr>
              <td class="red"></td>
              <td class="red"></td>


      </table>
    </div>


  </div>

</div>

和CSS。几乎所有的显示器都不起作用，或者我在这里犯了一个根本性的错误

    .jumbotron {
  background: black;
 display:flex;
  height: 75vh;
  justify-content: center;
  align-items: center;
}

table {
  width: 30px;
  height: 30px;

}

td {

 border:1px solid black;
}

jsfiddle：https://jsfiddle.net/m6ucyryb/

Answer 1

根据您的要求，您应该使用两张桌子。以下代码将在HTML中创建一个表。所以你必须在代码中使用2次。

<table>
</table>

每个表的需求包含3个表行，以下代码将在页面中创建一行，因此为每个表添加以下代码三次：

<tr>
</tr>

每行包含4个表数据。以下代码将创建一个表数据，因此在每个表行下，以下代码将使用四次。

<td class='magenta'></td>

我认为你需要它们之间有一些间距，它可以添加为给div元素一个边距：

<div class = "margin"></div>

最终解决方案如下：

table {
  width: 30px;
  height: 30px;
  
}
.margin {
  margin-top:5px;
}
td {
  
 border:1px solid black;
}
 
.red{
  
  background-color:red;
}

.yellow{
  
  background-color:yellow;
}
.green{
  
  background-color:green;
}
.blue{
  
  background-color:blue;
}
.white{
  
  background-color:white;
}
.magenta{
  
  background-color:magenta;
}
.cyan{
  
  background-color:cyan;
}

.black{

background-color : Black;
 
}

<!DOCTYPE html>
<html>

  <head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="extension.css" />
  </head>

  <body>
        <table>
            <tr>
              <td class='magenta'></td>
              <td class='magenta'></td>
              <td class='magenta'></td>
              <td class='magenta'></td>
            </tr>
            <tr>
              <td class="yellow"></td>
              <td class="blue"></td>
              <td class="yellow"></td>
              <td class="blue"></td>
            </tr>
            <tr>
              <td class="white"></td>
              <td class="white"></td>
              <td class="white"></td>
              <td class="white"></td>
            </tr>
       </table>
       <div class = "margin"></div>
       <table>
            <tr>
              <td class="white"></td>
              <td class='magenta'></td>
              <td class='magenta'></td>
              <td class="green"></td>
            </tr>
            <tr>
               <td class="yellow"></td>
               <td class="blue"></td>
               <td class="white"></td>
               <td class="blue"></td>
            </tr>
            <tr>
                <td class="white"></td>
                <td class="red"></td>
                <td class="red"></td>
                <td class="red"></td>
            </tr>
     </table>    
  </body>

</html>

table-inside div，表之间需要一些空间

1 个答案: